|
|
|
|
@ -1,91 +1,91 @@
|
|
|
|
|
<template>
|
|
|
|
|
<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 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="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="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="map-thumbnail">
|
|
|
|
|
<div id="mars2dContainer" class="mars2d-container"></div>
|
|
|
|
|
<div class="classify">
|
|
|
|
|
位置
|
|
|
|
|
<!-- 下侧轮播图 -->
|
|
|
|
|
<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">
|
|
|
|
|
<div id="mars2dContainerSSS" class="mars2d-container"></div>
|
|
|
|
|
<div class="classify">
|
|
|
|
|
位置
|
|
|
|
|
</div>
|
|
|
|
|
</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-select v-model="form.type" placeholder="请选择类型">
|
|
|
|
|
<el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
|
|
|
|
|
:value="dict.value"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="图片上传">
|
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleUploadSuccess"
|
|
|
|
|
:on-remove="handleUploadRemove" :file-list="fileList" list-type="picture-card">
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
</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>
|
|
|
|
|
<!-- 编辑/新增对话框 -->
|
|
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
|
|
|
|
|
<el-form :model="form" label-width="120px">
|
|
|
|
|
<el-form-item label="类型">
|
|
|
|
|
<el-select v-model="form.type" placeholder="请选择类型">
|
|
|
|
|
<el-option v-for="dict in dict.type.tplx" :key="dict.value" :label="dict.label"
|
|
|
|
|
:value="dict.value"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="图片上传">
|
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleUploadSuccess"
|
|
|
|
|
:on-remove="handleUploadRemove" :file-list="fileList" list-type="picture-card">
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
</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>
|
|
|
|
|
@ -93,250 +93,273 @@ import 'mars2d/mars2d.css';
|
|
|
|
|
import * as mars2d from 'mars2d';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {},
|
|
|
|
|
dicts: ['tplx'],
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
configUrl: basePathUrl + "config/config.json",
|
|
|
|
|
mapOptions: {
|
|
|
|
|
// 配置文档：http://mars2d.cn/apidoc.html#Map
|
|
|
|
|
copyright: false, // 不显示厂商logo
|
|
|
|
|
// basemap: 2021,
|
|
|
|
|
basemaps: [
|
|
|
|
|
{
|
|
|
|
|
"id": 2021,
|
|
|
|
|
"pid": 10,
|
|
|
|
|
"name": "高德电子",
|
|
|
|
|
"icon": "img/basemaps/gaode_vec.png",
|
|
|
|
|
"type": "gaode",
|
|
|
|
|
"layer": "vec",
|
|
|
|
|
"show": true
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
center: { lat: 31.2704, lng: 120.7600 }, // 中心点
|
|
|
|
|
zoom: 16, // 设置地图缩放级别
|
|
|
|
|
minZoom: 15, // 最小缩放级别
|
|
|
|
|
maxZoom: 20, // 最大缩放级别
|
|
|
|
|
zoomControl: true,
|
|
|
|
|
},
|
|
|
|
|
// 轮播图假数据（使用网络图片）
|
|
|
|
|
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, // 下侧轮播图当前索引
|
|
|
|
|
// 对话框相关
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
dialogTitle: '编辑项目',
|
|
|
|
|
form: {
|
|
|
|
|
type: '外部', // 默认类型
|
|
|
|
|
images: [], // 上传的图片列表
|
|
|
|
|
},
|
|
|
|
|
fileList: [], // 上传的文件列表
|
|
|
|
|
map: null, // 地图实例
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
onload(map) {
|
|
|
|
|
// 地图组件构造完成
|
|
|
|
|
components: {},
|
|
|
|
|
dicts: ['tplx'],
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
configUrl: basePathUrl + "config/config.json",
|
|
|
|
|
mapOptions: {
|
|
|
|
|
// 配置文档：http://mars2d.cn/apidoc.html#Map
|
|
|
|
|
copyright: false, // 不显示厂商logo
|
|
|
|
|
basemaps: [
|
|
|
|
|
{
|
|
|
|
|
"id": 2021,
|
|
|
|
|
"pid": 10,
|
|
|
|
|
"name": "高德电子",
|
|
|
|
|
"icon": "img/basemaps/gaode_vec.png",
|
|
|
|
|
"type": "gaode",
|
|
|
|
|
"layer": "vec",
|
|
|
|
|
"show": true
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
center: { lat: 31.3256, lng: 120.7457 },
|
|
|
|
|
zoom: 16, // 设置地图缩放级别
|
|
|
|
|
minZoom: 15, // 最小缩放级别
|
|
|
|
|
maxZoom: 20, // 最大缩放级别
|
|
|
|
|
zoomControl: true,
|
|
|
|
|
},
|
|
|
|
|
// 轮播图假数据（使用网络图片）
|
|
|
|
|
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, // 下侧轮播图当前索引
|
|
|
|
|
// 对话框相关
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
dialogTitle: '编辑项目',
|
|
|
|
|
form: {
|
|
|
|
|
type: '外部', // 默认类型
|
|
|
|
|
images: [], // 上传的图片列表
|
|
|
|
|
},
|
|
|
|
|
fileList: [], // 上传的文件列表
|
|
|
|
|
map: null, // 地图实例
|
|
|
|
|
markerIcon: require('@/assets/images/detailsicon/icon-定位@2x.png'), // 使用 require 引入图片
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 切换到上一张图片
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
methods: {
|
|
|
|
|
onload(map) {
|
|
|
|
|
// 地图组件构造完成
|
|
|
|
|
},
|
|
|
|
|
// 切换到上一张图片
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 编辑操作
|
|
|
|
|
handleEdit() {
|
|
|
|
|
this.dialogTitle = '编辑项目';
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
// 填充表单数据
|
|
|
|
|
this.form = {
|
|
|
|
|
type: '外部', // 默认类型
|
|
|
|
|
images: [], // 上传的图片列表
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 提交表单
|
|
|
|
|
handleSubmit() {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
// 调用 API 提交数据
|
|
|
|
|
},
|
|
|
|
|
// 上传成功
|
|
|
|
|
handleUploadSuccess(response, file) {
|
|
|
|
|
this.fileList.push(file);
|
|
|
|
|
this.form.images.push(file.url);
|
|
|
|
|
},
|
|
|
|
|
// 移除文件
|
|
|
|
|
handleUploadRemove(file) {
|
|
|
|
|
const index = this.fileList.indexOf(file);
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
this.fileList.splice(index, 1);
|
|
|
|
|
this.form.images.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 初始化地图
|
|
|
|
|
initMap() {
|
|
|
|
|
this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
|
|
|
|
|
this.map.on('load', this.onload);
|
|
|
|
|
},
|
|
|
|
|
// 地图加载完成后的回调
|
|
|
|
|
onload() {
|
|
|
|
|
this.addTestMarker();
|
|
|
|
|
},
|
|
|
|
|
addTestMarker() {
|
|
|
|
|
const graphic = new mars2d.graphic.Marker({
|
|
|
|
|
latlng: [31.3256, 120.7457], //xxxx的坐标
|
|
|
|
|
style: {
|
|
|
|
|
image: this.markerIcon, // 使用引入的图片路径
|
|
|
|
|
width: 46,
|
|
|
|
|
height: 60,
|
|
|
|
|
horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
|
|
|
|
|
verticalOrigin: mars2d.VerticalOrigin.BOTTOM
|
|
|
|
|
},
|
|
|
|
|
// attr: { remark: "xxxx的坐标" }
|
|
|
|
|
});
|
|
|
|
|
this.map.graphicLayer.addGraphic(graphic);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 切换到下一张图片
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initMap();
|
|
|
|
|
},
|
|
|
|
|
// 编辑操作
|
|
|
|
|
handleEdit() {
|
|
|
|
|
this.dialogTitle = '编辑项目';
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
// 填充表单数据
|
|
|
|
|
this.form = {
|
|
|
|
|
type: '外部', // 默认类型
|
|
|
|
|
images: [], // 上传的图片列表
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 提交表单
|
|
|
|
|
handleSubmit() {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
// 调用 API 提交数据
|
|
|
|
|
},
|
|
|
|
|
// 上传成功
|
|
|
|
|
handleUploadSuccess(response, file) {
|
|
|
|
|
this.fileList.push(file);
|
|
|
|
|
this.form.images.push(file.url);
|
|
|
|
|
},
|
|
|
|
|
// 移除文件
|
|
|
|
|
handleUploadRemove(file) {
|
|
|
|
|
const index = this.fileList.indexOf(file);
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
this.fileList.splice(index, 1);
|
|
|
|
|
this.form.images.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 初始化地图
|
|
|
|
|
initMap() {
|
|
|
|
|
this.map = new mars2d.Map('mars2dContainer', this.mapOptions);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initMap();
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
if (this.map) {
|
|
|
|
|
this.map.destroy();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</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;
|
|
|
|
|
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;
|
|
|
|
|
height: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: .5rem;
|
|
|
|
|
border-bottom: 1px solid #E5E5E5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-bar {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel {
|
|
|
|
|
width: 21rem;
|
|
|
|
|
height: 12rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
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;
|
|
|
|
|
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;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-item.active {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
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;
|
|
|
|
|
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;
|
|
|
|
|
left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.carousel-control.right {
|
|
|
|
|
right: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topleft {
|
|
|
|
|
width: 8rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0.4rem;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 8rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 0.4rem;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topleft img {
|
|
|
|
|
width: 0.81rem;
|
|
|
|
|
height: 0.81rem;
|
|
|
|
|
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;
|
|
|
|
|
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;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
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;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.map-thumbnail {
|
|
|
|
|
width: 76rem;
|
|
|
|
|
height: 25rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 76rem;
|
|
|
|
|
height: 25rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mars2d-container {
|
|
|
|
|
width: 76rem;
|
|
|
|
|
height: 25rem;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
