|
|
|
|
<template>
|
|
|
|
|
<div class="tabs">
|
|
|
|
|
<div class="tab-item" @click="onTabClick('plant-change')" :class="{'active': currentTab === 'plant-change'}">
|
|
|
|
|
植被变化对气候的影响
|
|
|
|
|
<img src="/images/line.png" v-if="currentTab === 'plant-change'" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-item" @click="onTabClick('plant-distribute')" :class="{'active': currentTab === 'plant-distribute'}">
|
|
|
|
|
植被分布对气候的影响
|
|
|
|
|
<img src="/images/line.png" v-if="currentTab === 'plant-distribute'" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-item" @click="onTabClick('植被和气候要素变化趋势')" :class="{'active': currentTab === '植被和气候要素变化趋势'}">
|
|
|
|
|
植被和气候要素变化趋势
|
|
|
|
|
<img src="/images/line.png" v-if="currentTab === '植被和气候要素变化趋势'" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tab-item" @click="onTabClick('植被和气候要素的监测')" :class="{'active': currentTab === '植被和气候要素的监测'}">
|
|
|
|
|
植被和气候要素的监测
|
|
|
|
|
<img src="/images/line.png" v-if="currentTab === '植被和气候要素的监测'" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="menu panel">
|
|
|
|
|
<div class="menu-item" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
|
|
|
|
|
<h2 class="tip">要素选择</h2>
|
|
|
|
|
<el-row :gutter="12">
|
|
|
|
|
<el-col :span="24"><span @click="onElementClick('NDVI')" :class="{'active': currentElement === 'NDVI'}">NDVI</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onElementClick('LAI')" :class="{'active': currentElement === 'LAI'}">LAI</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onElementClick('EVI')" :class="{'active': currentElement === 'EVI'}">EVI</span></el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="menu-item" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
|
|
|
|
|
<h2 class="tip">要素选择</h2>
|
|
|
|
|
<el-row :gutter="12">
|
|
|
|
|
<el-col :span="24"><span @click="onCategoryClick('地表温度LST')" :class="{'active': currentCategory === '地表温度LST'}">地表温度LST</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onCategoryClick('叶面积指数LAI')" :class="{'active': currentCategory === '叶面积指数LAI'}">叶面积指数LAI</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onCategoryClick('增强植被指数EVI')" :class="{'active': currentCategory === '增强植被指数EVI'}">增强植被指数EVI</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onCategoryClick('归一化植被指数NDVI')" :class="{'active': currentCategory === '归一化植被指数NDVI'}">归一化植被指数NDVI</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onCategoryClick('反照率Albedo')" :class="{'active': currentCategory === '反照率Albedo'}">反照率Albedo</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onCategoryClick('蒸散发Evapotranspiration')" :class="{'active': currentCategory === '蒸散发Evapotranspiration'}">蒸散发Evapotranspiration</span></el-col>
|
|
|
|
|
<el-col :span="24" v-if="currentTab === '植被和气候要素的监测'"><span @click="onCategoryClick('土地覆盖类型')" :class="{'active': currentCategory === '土地覆盖类型'}">土地覆盖类型</span></el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="menu-item" v-if="currentTab === '植被和气候要素的监测'">
|
|
|
|
|
<h2 class="tip">时间点选择</h2>
|
|
|
|
|
<el-row :gutter="12">
|
|
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（01:30）')" :class="{'active': currentTime === '地表温度（01:30）'}">地表温度（01:30）</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（10:30）')" :class="{'active': currentTime === '地表温度（10:30）'}">地表温度（10:30）</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（13:30）'}">地表温度（13:30）</span></el-col>
|
|
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（22:30）'}">地表温度（22:30）</span></el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container panel synergy-container">
|
|
|
|
|
<span class="save-btn"><img src="/images/save.png" /></span>
|
|
|
|
|
<div class="element-select" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
|
|
|
|
|
<div class="surface-temperature" v-if="currentTab === '植被和气候要素变化趋势'">
|
|
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（01:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（01:30）'}">地表温度（01:30）</span>
|
|
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（10:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（10:30）'}">地表温度（10:30）</span>
|
|
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（13:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（13:30）'}">地表温度（13:30）</span>
|
|
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（22:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（22:30）'}">地表温度（22:30）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="surface-temperature" v-if="currentTab === '植被和气候要素的监测'">
|
|
|
|
|
<span @click="onYearClick('2000')" :class="{'active': currentYear === '2000'}">2000</span>
|
|
|
|
|
<span @click="onYearClick('2001')" :class="{'active': currentYear === '2001'}">2001</span>
|
|
|
|
|
<span @click="onYearClick('2002')" :class="{'active': currentYear === '2002'}">2002</span>
|
|
|
|
|
<span @click="onYearClick('2003')" :class="{'active': currentYear === '2003'}">2003</span>
|
|
|
|
|
<span @click="onYearClick('2004')" :class="{'active': currentYear === '2004'}">2004</span>
|
|
|
|
|
<span @click="onYearClick('2005')" :class="{'active': currentYear === '2005'}">2005</span>
|
|
|
|
|
<span @click="onYearClick('2006')" :class="{'active': currentYear === '2006'}">2006</span>
|
|
|
|
|
<span @click="onYearClick('2007')" :class="{'active': currentYear === '2007'}">2007</span>
|
|
|
|
|
<span @click="onYearClick('2008')" :class="{'active': currentYear === '2008'}">2008</span>
|
|
|
|
|
<span @click="onYearClick('2009')" :class="{'active': currentYear === '2009'}">2009</span>
|
|
|
|
|
<span @click="onYearClick('2010')" :class="{'active': currentYear === '2010'}">2010</span>
|
|
|
|
|
<span @click="onYearClick('2011')" :class="{'active': currentYear === '2011'}">2011</span>
|
|
|
|
|
<span @click="onYearClick('2012')" :class="{'active': currentYear === '2012'}">2012</span>
|
|
|
|
|
<span @click="onYearClick('2013')" :class="{'active': currentYear === '2013'}">2013</span>
|
|
|
|
|
<span @click="onYearClick('2014')" :class="{'active': currentYear === '2014'}">2014</span>
|
|
|
|
|
<span @click="onYearClick('2015')" :class="{'active': currentYear === '2015'}">2015</span>
|
|
|
|
|
<span @click="onYearClick('2016')" :class="{'active': currentYear === '2016'}">2016</span>
|
|
|
|
|
<span @click="onYearClick('2017')" :class="{'active': currentYear === '2017'}">2017</span>
|
|
|
|
|
<span @click="onYearClick('2018')" :class="{'active': currentYear === '2018'}">2018</span>
|
|
|
|
|
<span @click="onYearClick('2019')" :class="{'active': currentYear === '2019'}">2019</span>
|
|
|
|
|
<span @click="onYearClick('2020')" :class="{'active': currentYear === '2020'}">2020</span>
|
|
|
|
|
<span @click="onYearClick('多年平均值2000-2020')" :class="{'active': currentYear === '多年平均值2000-2020'}">多年平均值2000-2020</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="picture-view synergy-picture-view" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
|
|
|
|
|
<el-row :gutter="0">
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<h2 class="title">地表温度（01:30）</h2>
|
|
|
|
|
<el-image
|
|
|
|
|
:src="imgUrl"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<h2 class="title">地表温度（10:30）</h2>
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture2.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<h2 class="title">地表温度（13:30）</h2>
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture1.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<h2 class="title">地表温度（22:30）</h2>
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture1.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<h2 class="title">反照率</h2>
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture1.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<h2 class="title">蒸散发</h2>
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture1.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="picture-view multi-picture-view" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
|
|
|
|
|
<el-row :gutter="0">
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
<el-image
|
|
|
|
|
src="/images/picture3.png"
|
|
|
|
|
:preview-src-list="srcList"
|
|
|
|
|
:initial-index="1"
|
|
|
|
|
fit="contain"
|
|
|
|
|
>
|
|
|
|
|
</el-image>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { onMounted, reactive, toRefs } from 'vue';
|
|
|
|
|
import { format } from '../hooks/String';
|
|
|
|
|
import * as Tiff from 'browser-tiff.js';
|
|
|
|
|
import { SynergyEvaluationConfig } from '../hooks/Config';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'SynergyEvaluation',
|
|
|
|
|
setup() {
|
|
|
|
|
let options = reactive({
|
|
|
|
|
currentTab: 'plant-change',
|
|
|
|
|
currentElement: 'NDVI',
|
|
|
|
|
currentCategory: '地表温度LST',
|
|
|
|
|
currentTime: '地表温度（01:30）',
|
|
|
|
|
currentYear: '2000',
|
|
|
|
|
currentSurfaceTemperatureTime: '地表温度（01:30）',
|
|
|
|
|
srcList: [],
|
|
|
|
|
imgUrl: null,
|
|
|
|
|
imgUrls: [],
|
|
|
|
|
items: [{
|
|
|
|
|
//'地表温度（10:30）', '地表温度（13:30）', '地表温度（22:30）', '反照率', '蒸散发',
|
|
|
|
|
title: '地表温度（01:30）',
|
|
|
|
|
type: 'temperature0130'
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
setImage();
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const setImage = () => {
|
|
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature0130');
|
|
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature1030');
|
|
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature1330');
|
|
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature2230');
|
|
|
|
|
initImage(options.currentTab, options.currentElement, 'albedo');
|
|
|
|
|
initImage(options.currentTab, options.currentElement, 'evaporation');
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < options.items.length; i++) {
|
|
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature0130');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const initImage = (tabName, elementName, type) => {
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.responseType = 'arraybuffer';
|
|
|
|
|
xhr.open('GET', SynergyEvaluationConfig.getUrl(tabName, elementName, type));
|
|
|
|
|
xhr.onload = function (e) {
|
|
|
|
|
let tiff = new Tiff({buffer: xhr.response});
|
|
|
|
|
let canvas = tiff.toCanvas();
|
|
|
|
|
let image = new Image();
|
|
|
|
|
image.src = canvas.toDataURL("image/png");
|
|
|
|
|
options.imgUrl = image.src;
|
|
|
|
|
options.srcList = [image.src];
|
|
|
|
|
};
|
|
|
|
|
xhr.send();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onTabClick = (name) => {
|
|
|
|
|
options.currentTab = name;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onElementClick = (element) => {
|
|
|
|
|
options.currentElement = element;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onCategoryClick = (category) => {
|
|
|
|
|
options.currentCategory = category;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onTimeClick = (time) => {
|
|
|
|
|
options.currentTime = time;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onSurfaceTemperatureClick = (value) => {
|
|
|
|
|
options.currentSurfaceTemperatureTime = value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onYearClick = (year) => {
|
|
|
|
|
options.currentYear = year;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
...toRefs(options),
|
|
|
|
|
onTabClick,
|
|
|
|
|
onElementClick,
|
|
|
|
|
onCategoryClick,
|
|
|
|
|
onSurfaceTemperatureClick,
|
|
|
|
|
onYearClick,
|
|
|
|
|
onTimeClick,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.main {
|
|
|
|
|
.synergy-container {
|
|
|
|
|
height: calc(~"100% - 0.6rem");
|
|
|
|
|
padding: 0.2rem 0 0.2rem 0.2rem;
|
|
|
|
|
.synergy-picture-view {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
:deep(.el-row) {
|
|
|
|
|
.title {
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-size: 0.22rem;
|
|
|
|
|
}
|
|
|
|
|
.el-col {
|
|
|
|
|
height: 46%;
|
|
|
|
|
margin-top: 1%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.el-image {
|
|
|
|
|
height: calc(~"100% - 0.4rem");
|
|
|
|
|
margin-top: 0.1rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.multi-picture-view {
|
|
|
|
|
height: calc(~"100% - 0.76rem");
|
|
|
|
|
.el-row {
|
|
|
|
|
height: 100%;
|
|
|
|
|
.el-col {
|
|
|
|
|
max-width: calc(~"(100% / 6) - 0.2rem");
|
|
|
|
|
height: 50%;
|
|
|
|
|
margin: 0.2rem 0.2rem 0 0;
|
|
|
|
|
border: 1px solid #666666;
|
|
|
|
|
.el-image {
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:nth-of-type(6n) {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.element-select {
|
|
|
|
|
position: relative;
|
|
|
|
|
.surface-temperature {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-left: 1px solid #498DF0;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
height: 0.34rem;
|
|
|
|
|
padding: 0 0.1rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 0.34rem;
|
|
|
|
|
border: 1px solid #498DF0;
|
|
|
|
|
border-left: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
background-color: #498DF0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.save-btn {
|
|
|
|
|
right: 0.2rem;
|
|
|
|
|
top: 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
