|
@@ -1,643 +0,0 @@
|
|
|
-<template>
|
|
|
- <Bg></Bg>
|
|
|
- <Header> </Header>
|
|
|
- <div class="container2">
|
|
|
- <div class="mainDiv">
|
|
|
- <Title class="title" title="农事复核对比"></Title>
|
|
|
- <div class="tabs">
|
|
|
- <div class="tabs-item confirmed">农事-营养 2023.4.16</div>
|
|
|
- <div class="tabs-item to-be-confirmed">
|
|
|
- 农事-营养
|
|
|
- <span class="time">2023.4.16</span>
|
|
|
- </div>
|
|
|
- <div class="tabs-item">农事-杀梢 2023.4.17</div>
|
|
|
- </div>
|
|
|
- <div class="button-row">
|
|
|
- <div class="btn-group">
|
|
|
- <div
|
|
|
- :class="['btn-item', 'yse-events', { 'btn-act': active === index }]"
|
|
|
- v-for="(item, index) in btnList"
|
|
|
- :key="index"
|
|
|
- @click="handleAct(index)"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="toggle-group" v-show="active === 0">
|
|
|
- <div :class="['toggle-item','before',{'before-act':btnItemAct===0}]" @click="handleBtnItemAct(0)">执行前</div>
|
|
|
- <div :class="['toggle-item','after',{'after-act':btnItemAct===1}]" @click="handleBtnItemAct(1)">执行后</div>
|
|
|
- </div>
|
|
|
- <div class="select" v-show="active !== 0">
|
|
|
- <el-select
|
|
|
- class="mr-10"
|
|
|
- v-show="active === 1"
|
|
|
- v-model="selectValue1"
|
|
|
- size="large"
|
|
|
- placeholder="品种筛选"
|
|
|
- style="width: 150px"
|
|
|
- popper-class="v-select-popper"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options1"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-model="selectValue"
|
|
|
- size="large"
|
|
|
- placeholder="区域筛选"
|
|
|
- style="width: 150px"
|
|
|
- popper-class="v-select-popper"
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-content">
|
|
|
- <div class="map" ref="mapRef" v-show="active === 0"></div>
|
|
|
- <div class="picture-list list" v-show="active === 1">
|
|
|
- <div
|
|
|
- :class="['picture-item', { marker: item.markers }]"
|
|
|
- :style="{
|
|
|
- marginRight: (index + 1) % 3 === 0 ? '0' : '8px',
|
|
|
- borderColor: item.markers ? '#F72E24' : '#00fff0',
|
|
|
- }"
|
|
|
- v-for="(item, index) in pictureList"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <el-image
|
|
|
- @click="handlePicturn(item, index)"
|
|
|
- class="image"
|
|
|
- :src="item.img1"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
- <el-image
|
|
|
- @click="handlePicturn(item, index)"
|
|
|
- class="image"
|
|
|
- :src="item.img2"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
- <div
|
|
|
- class="overlay"
|
|
|
- v-show="item.show"
|
|
|
- @click="handlePicturn(item, index)"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="overlay-btn"
|
|
|
- :style="{ background: item.markers ? '#F72E24' : '#f78724' }"
|
|
|
- @click.stop="handlePicturnBtn(item, index)"
|
|
|
- >
|
|
|
- {{ item.markers ? "取消标记" : "问题标记" }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="photo-list list" v-show="active === 2">
|
|
|
- <div
|
|
|
- class="photo-item"
|
|
|
- :style="{ marginRight: (index + 1) % 6 === 0 ? '0' : '19px' }"
|
|
|
- v-for="(item, index) in 20"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <el-image
|
|
|
- class="image"
|
|
|
- src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
- <div class="photo-name">王东东</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 按钮 -->
|
|
|
- <div class="box-btn">
|
|
|
- <div class="green yse-events">生成复核报告</div>
|
|
|
- <div class="orange yse-events">确认农事</div>
|
|
|
- </div>
|
|
|
- <!-- 问题标记区位 -->
|
|
|
- <div class="mark-area" v-show="showPicture" @click="handleMarkArea">
|
|
|
- <div class="mark-title">
|
|
|
- <div>问题标记区位</div>
|
|
|
- </div>
|
|
|
- <el-image
|
|
|
- class="image"
|
|
|
- src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import Header from "@/views/components/Header.vue";
|
|
|
-import Bg from "../Bg";
|
|
|
-import Title from "../components/title";
|
|
|
-import { useRouter } from "vue-router";
|
|
|
-import { reactive, toRefs, ref, onMounted } from "vue";
|
|
|
-import { useStore } from "vuex";
|
|
|
-import CheckComparisonMap from "./CheckComparisonMap";
|
|
|
-const router = useRouter();
|
|
|
-const store = useStore();
|
|
|
-const state = reactive({
|
|
|
- btnList: ["全景图", "近景图", "执行照片"],
|
|
|
- pictureList: [
|
|
|
- {
|
|
|
- img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- markers: false,
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- markers: true,
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- markers: false,
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- markers: false,
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- markers: true,
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- markers: false,
|
|
|
- show: false,
|
|
|
- },
|
|
|
- {
|
|
|
- img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
- markers: false,
|
|
|
- show: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- listItem: [],
|
|
|
-});
|
|
|
-
|
|
|
-const { btnList, pictureList, listItem } = toRefs(state);
|
|
|
-
|
|
|
-// 执行前后
|
|
|
-const btnItemAct = ref(0)
|
|
|
-const handleBtnItemAct = (e) => {
|
|
|
- btnItemAct.value = e;
|
|
|
-};
|
|
|
-
|
|
|
-const showPicture = ref(false);
|
|
|
-
|
|
|
-const active = ref(0);
|
|
|
-const handleAct = (e) => {
|
|
|
- active.value = e;
|
|
|
- selectValue.value = ''
|
|
|
- selectValue1.value = ''
|
|
|
-};
|
|
|
-
|
|
|
-const picturnIndex = ref(null);
|
|
|
-const picturnItem = ref(null);
|
|
|
-const handlePicturn = (e, i) => {
|
|
|
- showPicture.value = false;
|
|
|
- state.pictureList[i].show = !e.show;
|
|
|
-};
|
|
|
-
|
|
|
-const handlePicturnBtn = (e, i) => {
|
|
|
- picturnIndex.value = i;
|
|
|
- picturnItem.value = e;
|
|
|
- if (state.pictureList[i].markers) {
|
|
|
- state.pictureList[i].markers = !e.markers;
|
|
|
- state.pictureList[i].show = !e.show;
|
|
|
- } else {
|
|
|
- showPicture.value = e.show;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const handleMarkArea = () => {
|
|
|
- state.pictureList[picturnIndex.value].show = !picturnItem.value.show;
|
|
|
- showPicture.value = picturnItem.value.show;
|
|
|
- state.pictureList[picturnIndex.value].markers = !picturnItem.value.markers;
|
|
|
-};
|
|
|
-
|
|
|
-const selectValue = ref("");
|
|
|
-const options = [
|
|
|
- {
|
|
|
- value: "Option1",
|
|
|
- label: "1区",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Option2",
|
|
|
- label: "2区",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Option3",
|
|
|
- label: "3区",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Option4",
|
|
|
- label: "4区",
|
|
|
- },
|
|
|
-];
|
|
|
-
|
|
|
-const selectValue1 = ref("");
|
|
|
-const options1 = [
|
|
|
- {
|
|
|
- value: "Option1",
|
|
|
- label: "妃子笑",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Option2",
|
|
|
- label: "糯米糍",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Option3",
|
|
|
- label: "状元红",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "Option4",
|
|
|
- label: "青皮甜",
|
|
|
- },
|
|
|
-];
|
|
|
-
|
|
|
-const initData = async () => {
|
|
|
- // let url = "aPictureGarden";
|
|
|
- // if (!switchValue.value) {
|
|
|
- // url = "aPictureTree";
|
|
|
- // }
|
|
|
- // const { code, data } = await VE_API.regionalInformation[url]({
|
|
|
- // gardenId: curGardenId.value,
|
|
|
- // });
|
|
|
- // const dataValue = data.data;
|
|
|
- // state.baseData = dataValue;
|
|
|
- // state.btnList = dataValue;
|
|
|
- // updateData(active.value);
|
|
|
-};
|
|
|
-
|
|
|
-// 地图初始化
|
|
|
-const mapRef = ref(null);
|
|
|
-const kmap = new CheckComparisonMap();
|
|
|
-const location = store.getters.userinfo.location;
|
|
|
-const curGardenId = ref(store.getters.userinfo.curGardenId);
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- initData();
|
|
|
- kmap.initMap(location, mapRef.value);
|
|
|
- // kmap.initArea(curGardenId.value)
|
|
|
- // kmap.initSubArea(curGardenId.value)
|
|
|
- // kmap.addSingleSelect(selectTree)
|
|
|
-});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-// @import "../../styles/index.scss";
|
|
|
-.container2 {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- z-index: 2;
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- .mainDiv {
|
|
|
- position: absolute;
|
|
|
- top: 100px;
|
|
|
- bottom: 65px;
|
|
|
- left: 20px;
|
|
|
- right: 20px;
|
|
|
- border: 1px solid rgba(81, 233, 240, 0.6);
|
|
|
- .title {
|
|
|
- width: 449px;
|
|
|
- }
|
|
|
- .tabs {
|
|
|
- width: auto;
|
|
|
- height: 46px;
|
|
|
- display: flex;
|
|
|
- margin: 19px 0 4px 4px;
|
|
|
- .tabs-item {
|
|
|
- width: 242px;
|
|
|
- height: 100%;
|
|
|
- background: #00fff0;
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid #000000;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 19px;
|
|
|
- color: #0e4c5d;
|
|
|
- line-height: 46px;
|
|
|
- text-align: center;
|
|
|
- margin-right: 16px;
|
|
|
- cursor: pointer;
|
|
|
- &::after {
|
|
|
- position: absolute;
|
|
|
- top: -12px;
|
|
|
- right: -12px;
|
|
|
- width: 38px;
|
|
|
- height: 23px;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 9px;
|
|
|
- color: #fff;
|
|
|
- line-height: 23px;
|
|
|
- }
|
|
|
- &.confirmed {
|
|
|
- color: #f5f5f5;
|
|
|
- border: 1px solid #b1b1b1;
|
|
|
- background: #7c7978;
|
|
|
- position: relative;
|
|
|
- &::after {
|
|
|
- content: "已确认";
|
|
|
- color: #524e4e;
|
|
|
- background: url("@/assets/img/checkComparison/tips_bg_gray.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- &.to-be-confirmed {
|
|
|
- border: 1px solid #000000;
|
|
|
- background: #0e4c5d;
|
|
|
- color: #ffffff;
|
|
|
- position: relative;
|
|
|
- &::after {
|
|
|
- content: "待确认";
|
|
|
- background: url("@/assets/img/checkComparison/tips_bg_orange.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- .time {
|
|
|
- color: #31fef4;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .button-row {
|
|
|
- border: 1px solid #3ab5db;
|
|
|
- background: rgba(66, 153, 180, 0.4);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 10px;
|
|
|
- width: auto;
|
|
|
- height: 52px;
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- .btn-item {
|
|
|
- background: url("@/assets/img/checkComparison/btn_bg.png") no-repeat
|
|
|
- center center / 100% 100%;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 19px;
|
|
|
- text-align: center;
|
|
|
- line-height: 52px;
|
|
|
- padding: 0 22px;
|
|
|
- cursor: pointer;
|
|
|
- &.btn-act {
|
|
|
- background: url("@/assets/img/checkComparison/btn_bg_act.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .toggle-group {
|
|
|
- display: flex;
|
|
|
- .toggle-item {
|
|
|
- width: 126px;
|
|
|
- text-align: center;
|
|
|
- font-size: 21px;
|
|
|
- line-height: 52px;
|
|
|
- cursor: pointer;
|
|
|
- &.before {
|
|
|
- background: url("@/assets/img/checkComparison/before_bg.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- margin-right: -23px;
|
|
|
- }
|
|
|
- &.before-act {
|
|
|
- background: url("@/assets/img/checkComparison/before_bg_act.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- margin-right: -23px;
|
|
|
- }
|
|
|
- &.after {
|
|
|
- background: url("@/assets/img/checkComparison/after_bg.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- &.after-act {
|
|
|
- background: url("@/assets/img/checkComparison/after_bg_act.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .select {
|
|
|
- line-height: 49px;
|
|
|
- .mr-10 {
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .el-select {
|
|
|
- color: #00fff0;
|
|
|
- ::v-deep {
|
|
|
- .el-select__wrapper {
|
|
|
- background: url("@/assets/img/checkComparison/select_bg.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- border: none;
|
|
|
- box-shadow: none;
|
|
|
- .el-select__placeholder {
|
|
|
- font-weight: 800;
|
|
|
- font-size: 17px;
|
|
|
- color: #ffffff;
|
|
|
- background: linear-gradient(
|
|
|
- 92deg,
|
|
|
- #8cc1e3 0%,
|
|
|
- #cdfbff 48.8525390625%,
|
|
|
- #8cd8fb 100%
|
|
|
- );
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .box-content {
|
|
|
- // @include wh(auto, calc(100% - 52px - 46px - 62px - 19px));
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 4px;
|
|
|
- .map {
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid #00fff0;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .list {
|
|
|
- width: 100%;
|
|
|
- max-height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
- .picture-list {
|
|
|
- .picture-item {
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid #00fff0;
|
|
|
- width: 33%;
|
|
|
- height: 225px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 8px;
|
|
|
- margin-bottom: 15px;
|
|
|
- &.marker {
|
|
|
- &::before {
|
|
|
- content: "已标记";
|
|
|
- position: absolute;
|
|
|
- top: 4px;
|
|
|
- right: 4px;
|
|
|
- width: 72px;
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- text-align: right;
|
|
|
- padding-right: 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 5;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 15px;
|
|
|
- background: url("@/assets/img/checkComparison/picturn_title_bg.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .image {
|
|
|
- width: 49.5%;
|
|
|
- height: 100%;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .overlay {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(79, 38, 11, 0.6);
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .overlay-btn {
|
|
|
- background: #f78724;
|
|
|
- border-radius: 5px;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 21px;
|
|
|
- padding: 4px 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .photo-list {
|
|
|
- .photo-item {
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid #00fff0;
|
|
|
- width: 15.64%;
|
|
|
- height: 194px;
|
|
|
- margin-right: 19px;
|
|
|
- margin-bottom: 11px;
|
|
|
- position: relative;
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- .photo-name {
|
|
|
- position: absolute;
|
|
|
- bottom: 7px;
|
|
|
- left: 4px;
|
|
|
- text-align: center;
|
|
|
- line-height: 34px;
|
|
|
- width: 103px;
|
|
|
- height: 34px;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 19px;
|
|
|
- color: #2ff5ed;
|
|
|
- background: url("@/assets/img/checkComparison/title_bg.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .box-btn {
|
|
|
- position: absolute;
|
|
|
- bottom: 55px;
|
|
|
- left: 35%;
|
|
|
- display: flex;
|
|
|
- width: auto;
|
|
|
- div {
|
|
|
- width: 255px;
|
|
|
- height: 59px;
|
|
|
- line-height: 59px;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 21px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .orange {
|
|
|
- background: url("@/assets/img/checkComparison/map_btn_bg_orange.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- margin-right: 13px;
|
|
|
- }
|
|
|
- .green {
|
|
|
- background: url("@/assets/img/checkComparison/map_btn_bg_green.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .mark-area {
|
|
|
- position: absolute;
|
|
|
- right: 11px;
|
|
|
- bottom: 6px;
|
|
|
- width: 422px;
|
|
|
- height: 364px;
|
|
|
- background: #022d3c;
|
|
|
- box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.73);
|
|
|
- border-radius: 6px;
|
|
|
- border: 2px solid #11cfc4;
|
|
|
- cursor: pointer;
|
|
|
- .mark-title {
|
|
|
- background: url("@/assets/img/checkComparison/mark_title_bg.png")
|
|
|
- no-repeat center center / 100% 100%;
|
|
|
- width: 218px;
|
|
|
- height: 26px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 18px;
|
|
|
- margin: auto;
|
|
|
- text-align: center;
|
|
|
- line-height: 26px;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- div {
|
|
|
- color: #ffffff;
|
|
|
- background: linear-gradient(0deg, #06ffce 0%, #ffffff 100%);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 5px;
|
|
|
- position: absolute;
|
|
|
- z-index: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|