|
|
|
|
@ -1,25 +1,357 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-descriptions title="自定义样式列表" :column="3" border>
|
|
|
|
|
<el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">
|
|
|
|
|
kooriookami
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="备注">
|
|
|
|
|
<el-tag size="small">学校</el-tag>
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
<el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">
|
|
|
|
|
江苏省苏州市吴中区吴中大道 1188 号
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
:deep(.my-label) {
|
|
|
|
|
background: #E1F3D8 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.my-content {
|
|
|
|
|
background: #FDE2E2;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- 顶部操作栏 -->
|
|
|
|
|
<div class="containertop">
|
|
|
|
|
<div class="topleft">
|
|
|
|
|
<img src="../../../assets/images/detailsicon/1.png" alt="">
|
|
|
|
|
<span>项目图例</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="topright">
|
|
|
|
|
<el-button type="primary" size="medium" plain
|
|
|
|
|
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleEdit">
|
|
|
|
|
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
|
|
|
|
|
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
|
|
|
|
|
编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
|
|
<div class="main-content">
|
|
|
|
|
<!-- 左侧两个轮播图 -->
|
|
|
|
|
<div class="carousel-container">
|
|
|
|
|
<!-- 上侧轮播图 -->
|
|
|
|
|
<div class="carousel">
|
|
|
|
|
<div class="carousel-control left" @click="prevImage(1)">
|
|
|
|
|
<img src="../../../assets/images/icon-left@2x.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="(item, index) in carousel1Items" :key="index" class="carousel-item"
|
|
|
|
|
:class="{ active: index === currentIndex1 }">
|
|
|
|
|
<img :src="item" :alt="'Image ' + (index + 1)" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carousel-control right" @click="nextImage(1)">
|
|
|
|
|
<img src="../../../assets/images/icon-right@2x.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="classify">
|
|
|
|
|
外部
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 下侧轮播图 -->
|
|
|
|
|
<div class="carousel">
|
|
|
|
|
<div class="carousel-control left" @click="prevImage(2)">
|
|
|
|
|
<img src="../../../assets/images/icon-left@2x.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="(item, index) in carousel2Items" :key="index" class="carousel-item"
|
|
|
|
|
:class="{ active: index === currentIndex2 }">
|
|
|
|
|
<img :src="item" :alt="'Image ' + (index + 1)" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="carousel-control right" @click="nextImage(2)">
|
|
|
|
|
<img src="../../../assets/images/icon-right@2x.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="classify">
|
|
|
|
|
内部
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧地图缩略图 -->
|
|
|
|
|
<div class="map-thumbnail" @click="openMap">
|
|
|
|
|
<div id="map-container">
|
|
|
|
|
<div class="classify">
|
|
|
|
|
内部
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 编辑/新增对话框 -->
|
|
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
|
|
|
|
|
<el-form :model="form" label-width="120px">
|
|
|
|
|
<el-form-item label="项目名称">
|
|
|
|
|
<el-input v-model="form.name"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="项目地址">
|
|
|
|
|
<el-input v-model="form.address"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="经纬度">
|
|
|
|
|
<el-input v-model="form.latitude" placeholder="纬度"></el-input>
|
|
|
|
|
<el-input v-model="form.longitude" placeholder="经度"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="图片上传">
|
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleUploadSuccess"
|
|
|
|
|
:on-remove="handleUploadRemove" :file-list="fileList">
|
|
|
|
|
<el-button type="primary">上传图片</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 轮播图假数据（使用网络图片）
|
|
|
|
|
carousel1Items: [
|
|
|
|
|
'https://picsum.photos/300/200?random=1',
|
|
|
|
|
'https://picsum.photos/300/200?random=2',
|
|
|
|
|
'https://picsum.photos/300/200?random=3',
|
|
|
|
|
],
|
|
|
|
|
carousel2Items: [
|
|
|
|
|
'https://picsum.photos/300/200?random=4',
|
|
|
|
|
'https://picsum.photos/300/200?random=5',
|
|
|
|
|
'https://picsum.photos/300/200?random=6',
|
|
|
|
|
],
|
|
|
|
|
currentIndex1: 0, // 上侧轮播图当前索引
|
|
|
|
|
currentIndex2: 0, // 下侧轮播图当前索引
|
|
|
|
|
latitude: 39.90469, // 纬度
|
|
|
|
|
longitude: 116.40717, // 经度
|
|
|
|
|
// 对话框相关
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
dialogTitle: '编辑项目',
|
|
|
|
|
form: {
|
|
|
|
|
name: '默认项目名称',
|
|
|
|
|
address: '默认项目地址',
|
|
|
|
|
latitude: '39.90469',
|
|
|
|
|
longitude: '116.40717',
|
|
|
|
|
},
|
|
|
|
|
fileList: [], // 上传的文件列表
|
|
|
|
|
isMapLoaded: false, // 地图加载状态
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 初始化地图
|
|
|
|
|
this.initMap();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
|
|
// 切换到上一张图片
|
|
|
|
|
prevImage(carouselIndex) {
|
|
|
|
|
if (carouselIndex === 1) {
|
|
|
|
|
this.currentIndex1 =
|
|
|
|
|
(this.currentIndex1 - 1 + this.carousel1Items.length) % this.carousel1Items.length;
|
|
|
|
|
} else if (carouselIndex === 2) {
|
|
|
|
|
this.currentIndex2 =
|
|
|
|
|
(this.currentIndex2 - 1 + this.carousel2Items.length) % this.carousel2Items.length;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 切换到下一张图片
|
|
|
|
|
nextImage(carouselIndex) {
|
|
|
|
|
if (carouselIndex === 1) {
|
|
|
|
|
this.currentIndex1 = (this.currentIndex1 + 1) % this.carousel1Items.length;
|
|
|
|
|
} else if (carouselIndex === 2) {
|
|
|
|
|
this.currentIndex2 = (this.currentIndex2 + 1) % this.carousel2Items.length;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 初始化地图
|
|
|
|
|
initMap() {
|
|
|
|
|
try {
|
|
|
|
|
const map = new AMap.Map('map-container', {
|
|
|
|
|
zoom: 10,
|
|
|
|
|
center: [this.longitude, this.latitude],
|
|
|
|
|
viewMode: '2D',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 添加标记
|
|
|
|
|
new AMap.Marker({
|
|
|
|
|
position: [this.longitude, this.latitude],
|
|
|
|
|
map: map,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 地图加载完成后更新状态
|
|
|
|
|
this.isMapLoaded = true;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('地图初始化失败:', error);
|
|
|
|
|
// 可以在这里处理地图加载失败的情况，例如显示默认图片或提示用户
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 打开地图
|
|
|
|
|
openMap() {
|
|
|
|
|
const url = `https://uri.amap.com/marker?position=${this.longitude},${this.latitude}`;
|
|
|
|
|
window.open(url, '_blank');
|
|
|
|
|
},
|
|
|
|
|
// 编辑操作
|
|
|
|
|
handleEdit() {
|
|
|
|
|
this.dialogTitle = '编辑项目';
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
// 填充表单数据
|
|
|
|
|
this.form = {
|
|
|
|
|
name: '默认项目名称',
|
|
|
|
|
address: '默认项目地址',
|
|
|
|
|
latitude: this.latitude,
|
|
|
|
|
longitude: this.longitude,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 新增操作
|
|
|
|
|
handleAdd() {
|
|
|
|
|
this.dialogTitle = '新增项目';
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
// 清空表单
|
|
|
|
|
this.form = {
|
|
|
|
|
name: '',
|
|
|
|
|
address: '',
|
|
|
|
|
latitude: '',
|
|
|
|
|
longitude: '',
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 提交表单
|
|
|
|
|
handleSubmit() {
|
|
|
|
|
console.log('提交表单:', this.form);
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
// 调用 API 提交数据
|
|
|
|
|
},
|
|
|
|
|
// 上传成功
|
|
|
|
|
handleUploadSuccess(response, file) {
|
|
|
|
|
this.fileList.push(file);
|
|
|
|
|
},
|
|
|
|
|
// 移除文件
|
|
|
|
|
handleUploadRemove(file) {
|
|
|
|
|
const index = this.fileList.indexOf(file);
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
this.fileList.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
|
|
|
|
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.containertop {
|
|
|
|
|
height: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: .5rem;
|
|
|
|
|
border-bottom: 1px solid #E5E5E5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-bar {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel {
|
|
|
|
|
width: 21rem;
|
|
|
|
|
height: 12rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transition: opacity 0.5s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-item img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-item.active {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-control {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-control.left {
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-control.right {
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.map-thumbnail {
|
|
|
|
|
width: 21rem;
|
|
|
|
|
height: 25rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#map-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topleft {
|
|
|
|
|
width: 8rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0.4rem;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topleft img {
|
|
|
|
|
width: 0.81rem;
|
|
|
|
|
height: 0.81rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topleft span {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: 0.88rem;
|
|
|
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 0.88rem;
|
|
|
|
|
color: #3D424C;
|
|
|
|
|
line-height: 0.88rem;
|
|
|
|
|
text-align: right;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.classify {
|
|
|
|
|
width: 2.81rem;
|
|
|
|
|
height: 1.38rem;
|
|
|
|
|
background-color: rgba(43, 98, 241, 0.8);
|
|
|
|
|
border-radius: 0.69rem 0.69rem 0.69rem 0.69rem;
|
|
|
|
|
color: white;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: .5rem;
|
|
|
|
|
left:.5rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: .7rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
