|
@@ -1,41 +1,73 @@
|
|
|
<script lang="ts" setup>
|
|
|
-import { onMounted, reactive, ref } from 'vue'
|
|
|
-import { useRoute } from 'vue-router'
|
|
|
+import {onMounted, reactive, ref} from 'vue'
|
|
|
+import {useRoute} from 'vue-router'
|
|
|
import RightFrame from '@/components/RightFrame.vue'
|
|
|
import Card01 from '@/components/card/Card01.vue'
|
|
|
-import stations from '@/utils/station'
|
|
|
-import StripeTable from '@/components/StripeTable.vue'
|
|
|
+import {stationList, stations} from '@/utils/station'
|
|
|
import ColorTag from '@/components/tag/ColorTag.vue'
|
|
|
-import ImageTag from '@/components/tag/ImageTag.vue'
|
|
|
import Chart from '@/components/Chart.vue'
|
|
|
import DataTag from '@/components/tag/DataTag.vue'
|
|
|
+import {
|
|
|
+ getRainfallListOfPageByStcd,
|
|
|
+ getWaterLevelAndFlowLatest,
|
|
|
+ getWaterLevelAndFlowListOfPageByStcd,
|
|
|
+ getWaterQualityLatest,
|
|
|
+ getWaterQualityListOfPageByStcd
|
|
|
+} from "@/api/gx";
|
|
|
+import {formatd} from "@/utils/ruoyi";
|
|
|
+import {filterWaterQualitys} from "@/utils/unit";
|
|
|
+import {Setting, View} from "@/utils/tdInstruction";
|
|
|
|
|
|
const route = useRoute()
|
|
|
-let dibaImage = (new URL('@/assets/images/dike.png', import.meta.url).href)
|
|
|
-const jiankong = new URL('@/assets/images/tmp/jiankong.png', import.meta.url).href
|
|
|
+const dibaImage = (new URL('@/assets/images/dike.png', import.meta.url).href)
|
|
|
+const homeSrc = ref(new URL('@/assets/images/home.png', import.meta.url).href)
|
|
|
+const weatherSrc = ref(new URL('@/assets/images/weather.png', import.meta.url).href)
|
|
|
+const flagSrc = ref(new URL('@/assets/images/flag.png', import.meta.url).href)
|
|
|
+const walkSrc = ref(new URL('@/assets/images/walk.png', import.meta.url).href)
|
|
|
+const cultureSrc = ref(new URL('@/assets/images/culture.png', import.meta.url).href)
|
|
|
|
|
|
+const left2Ref = ref(null)
|
|
|
+const left3Ref = ref(null)
|
|
|
+const right1Ref = ref(null)
|
|
|
+const right3Ref = ref(null)
|
|
|
+const wqData = ref({d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20'})
|
|
|
+const station = ref(getStation(route.params.stcd))
|
|
|
+const wlData = reactive({
|
|
|
+ ss: '0',
|
|
|
+ zg: '0',
|
|
|
+ zd: '0',
|
|
|
+ bz: station.value.grz ? station.value.grz + '' : '0',
|
|
|
+ jj: station.value.wrz ? station.value.wrz + '' : '0'
|
|
|
+})
|
|
|
|
|
|
function getStation(stcd) {
|
|
|
return stations.find(item => item.stcd === stcd)
|
|
|
}
|
|
|
|
|
|
-function reloadRight1() {
|
|
|
+async function reloadLeft2() {
|
|
|
+ const sevenDayAgo = new Date(new Date().getTime() - 1 * 24 * 60 * 60 * 1000)
|
|
|
+ const flowData = await getWaterLevelAndFlowListOfPageByStcd({
|
|
|
+ stcd: route.params.stcd,
|
|
|
+ startTime: formatd(sevenDayAgo),
|
|
|
+ endTime: formatd(new Date())
|
|
|
+ }).then(res => {
|
|
|
+ return res.rows
|
|
|
+ })
|
|
|
const option = {
|
|
|
// backgroundColor: "#0B2D55",
|
|
|
tooltip: {
|
|
|
- axisPointer: {
|
|
|
- type: 'cross'
|
|
|
- }
|
|
|
+ trigger: 'axis',
|
|
|
},
|
|
|
grid: {
|
|
|
top: '14%',
|
|
|
left: '2%',
|
|
|
right: '4%',
|
|
|
- bottom: '5%',
|
|
|
+ bottom: '2%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
axisLine: { // 坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
@@ -45,18 +77,17 @@ function reloadRight1() {
|
|
|
axisLabel: { // 坐标轴刻度标签的相关设置
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
- axisTick: { show: false },
|
|
|
- data: ['10-31', '11-1', '11-2', '11-3', '11-4']
|
|
|
+ axisTick: {show: false},
|
|
|
+ data: flowData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
|
|
|
}],
|
|
|
yAxis: [{
|
|
|
- name: 'mm',
|
|
|
+ name: 'm³/s',
|
|
|
nameTextStyle: {
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
- min: value => (value.min - 1).toFixed(0),
|
|
|
- max: value => (value.max + 1).toFixed(0),
|
|
|
+ min: value => (value.min - 10).toFixed(0),
|
|
|
+ max: value => (value.max + 10).toFixed(0),
|
|
|
axisLabel: {
|
|
|
- margin: 20,
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
splitLine: {
|
|
@@ -70,26 +101,37 @@ function reloadRight1() {
|
|
|
}
|
|
|
}],
|
|
|
series: [{
|
|
|
- name: '雨量',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
+ name: '流量',
|
|
|
+ type: 'line',
|
|
|
+ areaStyle: {},
|
|
|
+ smooth: true, //是否平滑曲线显示
|
|
|
+ lineStyle: {
|
|
|
color: '#3deaff'
|
|
|
},
|
|
|
- shading: 'color',
|
|
|
- data: [5, 2, 0.5, 12, 22.6]
|
|
|
+ // barWidth: 18,
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top'
|
|
|
+ // },
|
|
|
+ data: flowData.map(item => item.q)
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
- right1Ref.value.loadChart(option)
|
|
|
+ left2Ref.value.loadChart(option)
|
|
|
}
|
|
|
|
|
|
-function reloadRight3() {
|
|
|
+async function reloadLeft3() {
|
|
|
+ const stcds = stationList.map(s => s.stcd).join(',')
|
|
|
+ const waterData = await getWaterLevelAndFlowLatest({stcds}).then(res => res.data)
|
|
|
+ const seriesData = stationList.map(s => {
|
|
|
+ const data = waterData.find(d => d.stcd === s.stcd)
|
|
|
+ return data ? data.z : 0
|
|
|
+ })
|
|
|
+
|
|
|
const option = {
|
|
|
// backgroundColor: "#0B2D55",
|
|
|
tooltip: {
|
|
|
- axisPointer: {
|
|
|
- type: 'cross'
|
|
|
- }
|
|
|
+ trigger: 'axis',
|
|
|
},
|
|
|
grid: {
|
|
|
top: '14%',
|
|
@@ -100,7 +142,6 @@ function reloadRight3() {
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
axisLine: { // 坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
@@ -110,11 +151,11 @@ function reloadRight3() {
|
|
|
axisLabel: { // 坐标轴刻度标签的相关设置
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
- axisTick: { show: false },
|
|
|
+ axisTick: {show: false},
|
|
|
data: ['太师桥', '文桥', '双林桥', '思源', '太平桥']
|
|
|
}],
|
|
|
yAxis: [{
|
|
|
- name: '℃',
|
|
|
+ name: 'm',
|
|
|
nameTextStyle: {
|
|
|
color: '#02cacf'
|
|
|
},
|
|
@@ -135,37 +176,46 @@ function reloadRight3() {
|
|
|
}
|
|
|
}],
|
|
|
series: [{
|
|
|
- name: '水质分析',
|
|
|
- type: 'line',
|
|
|
- smooth: true, //是否平滑曲线显示
|
|
|
- lineStyle: {
|
|
|
+ name: '水位',
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
color: '#3deaff'
|
|
|
},
|
|
|
- data: [23.1, 22.7, 22.9, 23, 22.6]
|
|
|
- }
|
|
|
- ]
|
|
|
+ barWidth: 18,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top'
|
|
|
+ },
|
|
|
+ data: seriesData
|
|
|
+ }]
|
|
|
}
|
|
|
- right3Ref.value.loadChart(option)
|
|
|
+ left3Ref.value.loadChart(option)
|
|
|
}
|
|
|
|
|
|
-function reloadLeft2() {
|
|
|
+async function reloadRight1() {
|
|
|
+ const sevenDayAgo = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
|
|
|
+ const rainfallData = await getRainfallListOfPageByStcd({
|
|
|
+ stcd: route.params.stcd,
|
|
|
+ startTime: formatd(sevenDayAgo),
|
|
|
+ endTime: formatd(new Date())
|
|
|
+ }).then(res => {
|
|
|
+ return res.rows
|
|
|
+ })
|
|
|
+
|
|
|
const option = {
|
|
|
// backgroundColor: "#0B2D55",
|
|
|
tooltip: {
|
|
|
- axisPointer: {
|
|
|
- type: 'cross'
|
|
|
- }
|
|
|
+ trigger: 'axis',
|
|
|
},
|
|
|
grid: {
|
|
|
top: '14%',
|
|
|
left: '2%',
|
|
|
- right: '7%',
|
|
|
- bottom: '5%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '0%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
axisLine: { // 坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
@@ -175,18 +225,18 @@ function reloadLeft2() {
|
|
|
axisLabel: { // 坐标轴刻度标签的相关设置
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
- axisTick: { show: false },
|
|
|
- data: ['11-5 9:00', '11-5 9:05', '11-5 9:10', '11-5 9:15', '11-5 9:20', '11-5 9:25', '11-5 9:30']
|
|
|
+ axisTick: {show: false},
|
|
|
+ data: rainfallData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
|
|
|
}],
|
|
|
yAxis: [{
|
|
|
- name: 'm³/s',
|
|
|
+ name: 'mm',
|
|
|
nameTextStyle: {
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
- min: value => (2 * value.max - value.min).toFixed(0),
|
|
|
- max: value => (2 * value.min - value.max).toFixed(0),
|
|
|
+ min: value => (value.min).toFixed(0),
|
|
|
+ max: value => (value.max).toFixed(0),
|
|
|
axisLabel: {
|
|
|
- margin: 10,
|
|
|
+ margin: 20,
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
splitLine: {
|
|
@@ -200,42 +250,57 @@ function reloadLeft2() {
|
|
|
}
|
|
|
}],
|
|
|
series: [{
|
|
|
- name: '流量',
|
|
|
- type: 'line',
|
|
|
- areaStyle: {},
|
|
|
- smooth: true, //是否平滑曲线显示
|
|
|
- lineStyle: {
|
|
|
+ name: '雨量',
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
color: '#3deaff'
|
|
|
},
|
|
|
- barWidth: 18,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top'
|
|
|
- },
|
|
|
- data: [101, 127, 139, 123, 123, 118, 116]
|
|
|
+ shading: 'color',
|
|
|
+ data: rainfallData.map(item => item.drp)
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
- left2Ref.value.loadChart(option)
|
|
|
+ right1Ref.value.loadChart(option)
|
|
|
}
|
|
|
|
|
|
-function reloadLeft3() {
|
|
|
+async function reloadRight3() {
|
|
|
+ const sevenDayAgo = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
|
|
|
+ const list = await getWaterQualityListOfPageByStcd({
|
|
|
+ stcd: route.params.stcd,
|
|
|
+ startTime: formatd(sevenDayAgo),
|
|
|
+ endTime: formatd(new Date())
|
|
|
+ }).then(res => res.rows)
|
|
|
+
|
|
|
+ // 1. 获取参数列表
|
|
|
+ const params = filterWaterQualitys(['WT', 'PH', 'COND', 'TURB', 'REDOX', 'CODMN', 'TN', 'NH3N', 'TP', 'DOX'])
|
|
|
const option = {
|
|
|
- // backgroundColor: "#0B2D55",
|
|
|
+ animationDuration: 3000,
|
|
|
+ legend: {
|
|
|
+ type: 'scroll',
|
|
|
+ pageIconColor: '#fff',
|
|
|
+ pageTextStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ icon: "stack",
|
|
|
+ selectedMode: "single",
|
|
|
+ data: params.map(i => i.label),
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
- axisPointer: {
|
|
|
- type: 'cross'
|
|
|
- }
|
|
|
+ trigger: 'axis',
|
|
|
},
|
|
|
grid: {
|
|
|
- top: '14%',
|
|
|
- left: '2%',
|
|
|
+ top: '25%',
|
|
|
+ left: '4%',
|
|
|
right: '4%',
|
|
|
- bottom: '5%',
|
|
|
+ bottom: '0%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
axisLine: { // 坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
@@ -245,18 +310,17 @@ function reloadLeft3() {
|
|
|
axisLabel: { // 坐标轴刻度标签的相关设置
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
- axisTick: { show: false },
|
|
|
- data: ['太师桥', '文桥', '双林桥', '思源', '太平桥']
|
|
|
+ axisTick: {show: false},
|
|
|
+ data: list.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
|
|
|
}],
|
|
|
yAxis: [{
|
|
|
- name: 'm',
|
|
|
+ name: '℃',
|
|
|
nameTextStyle: {
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
min: value => (value.min - 1).toFixed(0),
|
|
|
max: value => (value.max + 1).toFixed(0),
|
|
|
axisLabel: {
|
|
|
- margin: 20,
|
|
|
color: '#02cacf'
|
|
|
},
|
|
|
splitLine: {
|
|
@@ -269,64 +333,63 @@ function reloadLeft3() {
|
|
|
show: true
|
|
|
}
|
|
|
}],
|
|
|
- series: [{
|
|
|
- name: '水位',
|
|
|
- type: 'bar',
|
|
|
- itemStyle: {
|
|
|
- color: '#3deaff'
|
|
|
- },
|
|
|
- barWidth: 18,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top'
|
|
|
- },
|
|
|
- data: [2.1, 2.7, 3.9, 2.3, 2.3]
|
|
|
- }
|
|
|
- ]
|
|
|
+ series: params.map(i => {
|
|
|
+ return {
|
|
|
+ name: i.label,
|
|
|
+ data: list.map(e => e[i.key.toLowerCase()]),
|
|
|
+ type: "line",
|
|
|
+ smooth: true, //是否平滑曲线显示
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#3deaff'
|
|
|
+ // },
|
|
|
+ }
|
|
|
+ }),
|
|
|
}
|
|
|
- left3Ref.value.loadChart(option)
|
|
|
+ right3Ref.value.loadChart(option)
|
|
|
+ right3Ref.value.carousel(1000, true)
|
|
|
}
|
|
|
|
|
|
-const station = ref(getStation(route.params.stcd))
|
|
|
-const introduces = ref(station.value.detail?.split('\n'))
|
|
|
-const introduceImg = new URL(station.value.img, import.meta.url).href
|
|
|
-
|
|
|
-const deviceInfoColumns = [
|
|
|
- { label: '设备名称', prop: 'name' },
|
|
|
- { label: '设备位置', prop: 'loc', width: '110' },
|
|
|
- { label: '设备状态', prop: 'status', width: '110' }
|
|
|
-]
|
|
|
-
|
|
|
-const deviceInfoData = [
|
|
|
- { name: '总磷分析仪', loc: '100米', status: '正常' },
|
|
|
- { name: '总氮分析仪', loc: '100米', status: '正常' },
|
|
|
- { name: '水位计', loc: '100米', status: '正常' },
|
|
|
- { name: '氢氮分析仪', loc: '100米', status: '正常' }
|
|
|
-]
|
|
|
-
|
|
|
-const wqData = ref([])
|
|
|
-const wlData = reactive({ ss: '3.80', zg: '4.65', zd: '4.65', bz: '4.65', jj: '4.65' })
|
|
|
-const right1Ref = ref(null)
|
|
|
-const right3Ref = ref(null)
|
|
|
-const left2Ref = ref(null)
|
|
|
-const left3Ref = ref(null)
|
|
|
+/**
|
|
|
+ * 获取实时水位数据
|
|
|
+ */
|
|
|
+function getCharacteristicLevel() {
|
|
|
+ getWaterLevelAndFlowLatest({stcds: route.params.stcd}).then(res => {
|
|
|
+ const data = res.data[0]
|
|
|
+ wlData.ss = data.z + ''
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
-const homeSrc = ref(new URL('@/assets/images/home.png', import.meta.url).href)
|
|
|
-const weatherSrc = ref(new URL('@/assets/images/weather.png', import.meta.url).href)
|
|
|
-const flagSrc = ref(new URL('@/assets/images/flag.png', import.meta.url).href)
|
|
|
-const walkSrc = ref(new URL('@/assets/images/walk.png', import.meta.url).href)
|
|
|
-const cultureSrc = ref(new URL('@/assets/images/culture.png', import.meta.url).href)
|
|
|
+/**
|
|
|
+ * 获取最新水质数据
|
|
|
+ */
|
|
|
+function getLatestWaterQuality() {
|
|
|
+ getWaterQualityLatest({stcds: route.params.stcd}).then(res => {
|
|
|
+ const data = res.data[0]
|
|
|
+ wqData.value = {
|
|
|
+ d1: data.ph,
|
|
|
+ d2: data.dox,
|
|
|
+ d3: data.chla,
|
|
|
+ d4: data.turb,
|
|
|
+ d5: data.wt,
|
|
|
+ d6: data.cond,
|
|
|
+ d7: data.tn,
|
|
|
+ d8: data.tp
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- wqData.value = { d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20' }
|
|
|
reloadRight1()
|
|
|
reloadRight3()
|
|
|
reloadLeft2()
|
|
|
reloadLeft3()
|
|
|
|
|
|
+ // 获取实时水位
|
|
|
+ getCharacteristicLevel()
|
|
|
+ // 获取最新水质数据
|
|
|
+ getLatestWaterQuality()
|
|
|
})
|
|
|
</script>
|
|
|
-
|
|
|
<template>
|
|
|
<right-frame>
|
|
|
<template #leftModule>
|
|
@@ -334,13 +397,13 @@ onMounted(() => {
|
|
|
<el-row :gutter="10" justify="space-around" style="height: 100%;">
|
|
|
<el-col :span="16" style="height: 66%;margin-bottom: 1%;position: relative;">
|
|
|
<div class="difang-water-level">
|
|
|
- <span class="difang-water-level-value">3.8m</span>
|
|
|
+ <span class="difang-water-level-value">{{ wlData.ss }}m</span>
|
|
|
</div>
|
|
|
- <img :src="dibaImage" alt="" class="difang-image" />
|
|
|
+ <img :src="dibaImage" alt="" class="difang-image"/>
|
|
|
</el-col>
|
|
|
<el-col :span="8"
|
|
|
style="height: 66%;margin-bottom: 1%;display: flex;flex-direction: column;justify-content: space-between;">
|
|
|
- <color-tag :value="wlData.jj" label="实时水位" style="height: 48%;" unit="m"></color-tag>
|
|
|
+ <color-tag :value="wlData.ss" label="实时水位" style="height: 48%;" unit="m"></color-tag>
|
|
|
<color-tag :value="wlData.zg" label="历史最高水位" style="height: 48%;" unit="m"></color-tag>
|
|
|
</el-col>
|
|
|
<el-col :span="8" style="height: 33%;">
|
|
@@ -381,12 +444,28 @@ onMounted(() => {
|
|
|
</card01>
|
|
|
</template>
|
|
|
<template #btnGroup>
|
|
|
- <div style="display: flex;flex-direction: column;">
|
|
|
- <div><img :src="homeSrc"></div>
|
|
|
- <div><img :src="weatherSrc"></div>
|
|
|
- <div><img :src="flagSrc"></div>
|
|
|
- <div><img :src="walkSrc"></div>
|
|
|
- <div><img :src="cultureSrc"></div>
|
|
|
+ <div class="right-btn-container">
|
|
|
+ <div class="right-btn-item"><img :src="homeSrc"></div>
|
|
|
+ <div class="right-btn-item">
|
|
|
+ <img :src="weatherSrc">
|
|
|
+ <div class="right-btn-option-list">
|
|
|
+ <div class="right-btn-option" @click="Setting.setWeather('晴')">晴</div>
|
|
|
+ <div class="right-btn-option" @click="Setting.setWeather('多云')">多云</div>
|
|
|
+ <div class="right-btn-option" @click="Setting.setWeather('阴天')">阴天</div>
|
|
|
+ <div class="right-btn-option" @click="Setting.setWeather('小雨')">小雨</div>
|
|
|
+ <div class="right-btn-option" @click="Setting.setWeather('中雨')">中雨</div>
|
|
|
+ <div class="right-btn-option" @click="Setting.setWeather('大雨')">大雨</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-btn-item"><img :src="flagSrc"></div>
|
|
|
+ <div class="right-btn-item">
|
|
|
+ <img :src="walkSrc">
|
|
|
+ <div class="right-btn-option-list">
|
|
|
+ <div class="right-btn-option" @click="View.changeView('远')">远</div>
|
|
|
+ <div class="right-btn-option" @click="View.changeView('近')">近</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-btn-item"><img :src="cultureSrc"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</right-frame>
|
|
@@ -416,4 +495,47 @@ onMounted(() => {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
+.right-btn-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .right-btn-item {
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:hover, &.active {
|
|
|
+
|
|
|
+ img {
|
|
|
+ background-color: rgba(16, 136, 215, 0.6);
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .right-btn-option-list {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-btn-option-list {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 1.8rem;
|
|
|
+ width: 140px;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-btn-option {
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #394139;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|