123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958 |
- <template>
- <div class="detail-content">
- <div class="title">环境参数</div>
- <van-tabs class="my-tab" @change="changeTab" v-model:active="active">
- <van-tab
- :title="item.name"
- :name="item.funcid"
- :key="item.id + '' + index"
- v-for="(item, index) in titleList"
- >
- <div class="container-text" v-if="item.options">
- <span>{{
- item.funcid == "Tdb,RH" ? "温湿度逐时分布" : "浓度逐时分布"
- }}</span>
- </div>
- <div class="chart-box">
- <com-chart
- :options="item.options"
- v-if="item.options"
- :id="item.funcid"
- height="100%"
- width="100%"
- />
- <div v-else class="no-data" height="100%" width="100%">
- <template v-if="item.showNowData === 1">
- <img :src="parseImgUrl('page-officehome', 'empty.png')" alt="" />
- <span>暂无数据</span>
- </template>
- <template v-if="item.showNowData === 2">
- <img :src="parseImgUrl('page-officehome', 'empty.png')" alt="" />
- <span>该空间数据未配置</span>
- </template>
- </div>
- </div>
- <div class="detail-desc clearfix">
- <!-- <div class="detail-title">
- {{ item.name }}
- </div> -->
- <div class="detail-text">
- <p v-for="(textItem, idx) in item.text" :key="idx">
- <!-- <van-icon class="icon" name="success" v-if="idx % 2 == 0" /> -->
- <span class="circle"></span>
- <span class="tem-span">
- {{ textItem }}
- </span>
- </p>
- </div>
- </div>
- <div class="detail-bottom">
- <p>{{ item.level }}</p>
- <div class="text-img">
- <img :src="item.img" alt="" />
- </div>
- </div>
- </van-tab>
- </van-tabs>
- <van-loading class="temp-loading" v-if="showLoading"> </van-loading>
- </div>
- </template>
- <script lang="ts">
- import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
- import ComChart from "@/components/charts/ComChart.vue";
- import { useRoute } from "vue-router";
- import * as echarts from "echarts";
- import { EChartsOption } from "echarts";
- import { getChartListHTTP } from "@/apis/envmonitor";
- import { setQueryConfig } from "@/utils";
- import { parseImgUrl } from "@/utils";
- import { Toast } from "vant";
- export default defineComponent({
- props: {
- query: {
- // 空调基本信息
- type: Object,
- default: () => {},
- },
- },
- components: {
- ComChart,
- },
- setup(props) {
- const titleList: any = [
- {
- id: 0,
- name: "CO₂",
- funcid: "CO2",
- unit: "ppm",
- text: [
- "CO₂,一种无色无味气体",
- "CO₂的标准为1000ppm",
- "CO₂过高,影响人体呼吸系统",
- "大脑易疲劳,工作效率降低",
- "室内人员增多,新风量不足时",
- "室内CO₂的浓度就会上升",
- "宜开窗通风或增加送风量",
- "来降低CO₂浓度",
- ],
- level: "不同浓度下的人体感觉",
- img: parseImgUrl("page-officehome", "CO2.png"),
- showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
- options: null,
- },
- {
- id: 1,
- name: "PM2.5",
- unit: "ug/m³",
- funcid: "PM2d5",
- options: null,
- text: [
- "PM2.5,直径≤2.5微米的颗粒",
- "PM2.5的平均值在0-35μg/m3",
- "PM2.5浓度过高,影响人体",
- "呼吸系统和心血管系统健康",
- "应开启除尘净化设备",
- ],
- level: "不同PM2.5浓度对应等级",
- img: parseImgUrl("page-officehome", "pm25.png"),
- showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
- },
- {
- id: 2,
- name: "甲醛",
- unit: "mg/㎡",
- options: null,
- funcid: "HCHO",
- text: [
- "甲醛(HCHO)是无色有刺激性有机气体。甲醛的主要危害表现为对皮肤和黏膜的刺激作用,室内甲醛浓度长期偏高会引发呼吸系统,消化系统或免疫系统疾病。",
- "甲醛多来自于室内装饰材料,如家具,墙纸,油漆以及胶水、芳香剂等物质。",
- "由于家具,胶水中的甲醛挥发是一个长期缓慢的过程,因此甲醛超标常表现为室内甲醛浓度长期处于较高的数值。",
- "最为有效避免甲醛超标的方法是持续高效的通风,通过引入室外新鲜空气将室内甲醛浓度长期控制在低于有害标准的范围内。",
- "由于甲醛传感器为电化学传感器,存在交叉干扰的特性,当室内出现无害的挥发性气体时也会导致测得的甲醛浓度短暂升高,如吸烟,使用香水,空气清新剂,喷洒酒精,甚至剥橘子皮溅出的汁液均可能在短时间内影响甲醛传感器的读数,在去除干扰源后,此种影响会在短时间内消除,可不必因此产生担忧。",
- ],
- level: "不同阈值浓度对应标准",
- img: parseImgUrl("page-officehome", "methanal.png"),
- showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
- },
- {
- id: 3,
- name: "温湿度",
- unit: "%",
- funcid: "Tdb,RH",
- options: null,
- text: [
- "温度表示空气的冷热程度",
- "夏季高温高湿会使人烦躁、疲倦",
- "冬季湿度过高时,人体感觉越冷",
- "冬季湿度低易引起呼吸道不适",
- "室外温度较高时,宜遮阳关窗",
- ],
- level: "",
- img: "",
- showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
- },
- ];
- const query: {
- funcid: string;
- spaceId: string;
- } = {
- funcid: "",
- spaceId: "",
- };
- const activeItem: any = [];
- const proxyData = reactive({
- active: "",
- showLoading: false,
- activeItem: activeItem,
- titleList: titleList,
- query: props.query ? props.query : query,
- parseImgUrl: parseImgUrl,
- /**
- * 加载loading
- */
- loadingStart() {
- // Toast.loading({
- // duration: 0, // 持续展示 toast
- // forbidClick: true,
- // message: "加载中...",
- // });
- proxyData.showLoading = true;
- },
- /**
- * 结束
- */
- loadinngEnd() {
- // Toast.clear();
- proxyData.showLoading = false;
- },
- /**
- * 设置当前选中的tab
- */
- setActiveItem() {
- for (let i = 0; i < proxyData.titleList.length; i++) {
- if (proxyData.titleList[i].funcid == proxyData.query.funcid) {
- proxyData.active = proxyData.titleList[i].funcid;
- proxyData.activeItem = proxyData.titleList[i];
- break;
- }
- }
- },
- /**
- * 详情页面tab切换
- */
- changeTab() {
- if (proxyData.query.spaceId) {
- proxyData.query.funcid = proxyData.active;
- proxyData.setActiveItem();
- proxyData.queryAllData();
- }
- },
- // 查询echarts图表
- queryAllData() {
- if (proxyData.activeItem.funcid) {
- // debugger;
- let funcid = proxyData.activeItem.funcid;
- proxyData.loadingStart();
- // proxyData.showLoading = true;
- if (funcid === "Tdb,RH") {
- // 两条线的 时候
- proxyData.formatTowOptions(funcid);
- } else {
- proxyData.formatOptios(funcid);
- }
- }
- },
- /**
- *获取图表统计数据
- * @param funcid
- */
- getData(funcid: string = "") {
- // debugger
- let paramObj = {
- spaceId: proxyData.query.spaceId,
- funcid: funcid,
- };
- const paramStr: string = setQueryConfig(paramObj);
- return getChartListHTTP(paramStr)
- .then((res) => {
- const resData: any = res;
- let { propertyData, dayTarget } = resData;
- let chartData = proxyData.formatChartData(
- propertyData,
- dayTarget,
- funcid
- );
- // 设置警线的值
- let chartMax = proxyData.setMax(funcid, dayTarget);
- if (funcid === "Tdb" || funcid === "RH") {
- return chartData;
- } else {
- return {
- chartData,
- chartMax,
- };
- }
- })
- .catch((error: any) => {
- proxyData.loadinngEnd();
- // proxyData.showLoading = false;
- });
- },
- /**
- * co pm 甲醛统计数据格式化成图表可使用的数据
- * @param propertyData
- * @param dayTarget
- * @param funcid
- */
- formatChartData(propertyData: any, dayTarget: any, funcid: any) {
- // 只是一个处理数据的函数
- if (!Array.isArray(propertyData) || !Array.isArray(dayTarget)) {
- return [];
- }
- let baseArr: any = (propertyData && propertyData.slice(1)) || [];
- let tragetChart: any = [];
- let handleNumber = (val: any) => {
- return Number(val);
- };
- let initNum = {
- PM2d5: handleNumber,
- CO2: handleNumber,
- HCHO: function (value: any) {
- return Number(Number(value).toFixed(2));
- },
- RH: handleNumber,
- Tdb: handleNumber,
- };
- // 类型
- if (baseArr && baseArr.length > 0) {
- for (let i = 0; i < baseArr.length; i++) {
- let item = baseArr[i];
- item[1] = item[1] == "-9999" ? null : initNum[funcid](item[1]);
- }
- }
- if (
- baseArr.length &&
- dayTarget.length &&
- baseArr.length === dayTarget.length
- ) {
- for (let i = 0; i < dayTarget.length; i++) {
- let item = dayTarget[i];
- let time = "";
- item.time &&
- (time = item.time.slice(0, 2) + ":" + item.time.slice(2, 4));
- let initObj = {
- time: time,
- sales: baseArr[i][1],
- };
- tragetChart.push(initObj);
- }
- }
- return tragetChart;
- },
- checkIsData(data: any) {
- let tempArr: any = data.filter((item: any) => {
- return item === null;
- });
- if (data.length === tempArr.length) {
- return false;
- } else {
- return true;
- }
- },
- async formatOptios(funcid: any) {
- proxyData.activeItem.options = null;
- let { chartData, chartMax } = await proxyData.getData(funcid);
- proxyData.loadinngEnd();
- // proxyData.showLoading = false;
- let seriesData: any = chartData.map((item: any) => {
- return item.sales;
- });
- let xData: any = chartData.map((item: any) => {
- return item.time;
- });
- let max: any = Math.max(...seriesData);
- if (xData && xData.length) {
- if (proxyData.checkIsData(seriesData)) {
- let options = {
- tooltip: {
- trigger: "axis",
- },
- grid: {
- top: 25,
- left: 10,
- right: 20,
- bottom: 20,
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: "#ECEFF4",
- },
- },
- axisLabel: {
- fontSize: 12,
- interval: 8,
- showMaxLabel: true,
- color: "#C4C4C4",
- },
- data: xData,
- },
- ],
- yAxis: [
- {
- name: `单位:(${proxyData.activeItem.unit})`,
- type: "value",
- nameGap: 12, // y轴name与横纵坐标轴线的间距
- // nameLocation: "left", // y轴name处于y轴的什么位置
- nameTextStyle: {
- color: "#9FA9BC",
- padding:
- proxyData.activeItem.name == "PM2.5"
- ? [0, 25, 0, 55]
- : [0, 25, 0, 25],
- // margin : [5, 0, 0, -20],
- },
- // max: chartMax,
- axisTick: {
- show: false,
- },
- axisLine: {
- lineStyle: {
- color: "#ECEFF4",
- },
- },
- axisLabel: {
- fontSize: 12,
- color: "#C4C4C4",
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#ECEFF4",
- },
- },
- },
- ],
- series: [
- {
- markLine:
- max && chartMax && max >= chartMax
- ? {
- symbol: "none",
- data: [
- {
- name: "均线",
- type: "max",
- yAxis: chartMax,
- lineStyle: {
- normal: {
- color: "red",
- width: 2,
- type: "solid",
- },
- },
- },
- ],
- label: {
- normal: {
- show: true,
- position: "middle",
- textStyle: {
- fontSize: 12,
- fontWeight: 600,
- },
- },
- },
- }
- : {},
- name: proxyData.activeItem.name,
- type: "line",
- smooth: true,
- symbol: "circle",
- symbolSize: 5,
- showSymbol: false,
- areaStyle: {
- color: new (echarts as any).graphic.LinearGradient(
- 0,
- 1,
- 0,
- 0,
- [
- {
- offset: 0,
- color: "rgba(79, 128, 255, 0.1)",
- },
- {
- offset: 1,
- color: "rgba(79, 128, 255, 0.6)",
- },
- ],
- false
- ),
- shadowColor: "rgba(79, 128, 255, 0.1)",
- shadowBlur: 10,
- },
- itemStyle: {
- color: "rgba(79, 128, 255, 1)",
- borderColor: "rgba(79, 128, 255, 1)",
- borderWidth: 12,
- },
- data: seriesData,
- },
- ],
- } as EChartsOption;
- proxyData.activeItem.options = options;
- proxyData.activeItem.showNowData = 0;
- } else {
- proxyData.activeItem.options = null;
- proxyData.activeItem.showNowData = 1;
- }
- } else {
- proxyData.activeItem.options = null;
- proxyData.activeItem.showNowData = 2;
- }
- },
- async formatTowOptions(funcid: any) {
- // debugger
- proxyData.activeItem.options = null;
- let funcidArr = funcid.split(",");
- // debugger
- let chartData1: any = await proxyData.getData(funcidArr[0]);
- let chartData2: any = await proxyData.getData(funcidArr[1]);
- proxyData.loadinngEnd();
- let xData: any = chartData1.map((item: any) => {
- return item.time;
- });
- let seriesData1: any = chartData1.map((item: any) => {
- return item.sales;
- });
- let seriesData2: any = chartData2.map((item: any) => {
- return item.sales;
- });
- let options = {
- tooltip: {
- trigger: "axis",
- },
- legend: {
- icon: "circle",
- itemWidth: 14,
- itemHeight: 5,
- itemGap: 20,
- data: ["温度", "湿度"],
- textStyle: {
- fontSize: 12,
- color: "#C4C4C4",
- },
- },
- grid: {
- top: 30,
- left: 5,
- right: 15,
- bottom: 20,
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: "#ECEFF4",
- },
- },
- axisLabel: {
- fontSize: 12,
- interval: 8,
- showMaxLabel: true,
- color: "#C4C4C4",
- },
- data: xData,
- },
- ],
- yAxis: [
- {
- name: "单位:℃",
- type: "value",
- nameGap: 12, // y轴name与横纵坐标轴线的间距
- // nameLocation: "left", // y轴name处于y轴的什么位置
- nameTextStyle: {
- color: "#9FA9BC",
- padding: [0, 25, 0, 15],
- // margin : [5, 0, 0, -20],
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- lineStyle: {
- color: "#ECEFF4",
- },
- },
- axisLabel: {
- fontSize: 12,
- color: "#C4C4C4",
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- color: "#ECEFF4",
- },
- },
- },
- {
- name: "单位:%",
- nameGap: 12, // y轴name与横纵坐标轴线的间距
- nameTextStyle: {
- color: "#9FA9BC",
- padding: [0, 0, 0, 10],
- },
- type: "value",
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: "#ECEFF4",
- },
- },
- axisLabel: {
- fontSize: 12,
- color: "#C4C4C4",
- },
- splitLine: {
- show: false,
- },
- },
- ],
- series: [
- {
- name: "温度",
- type: "line",
- smooth: true,
- symbol: "circle",
- symbolSize: 5,
- yAxisIndex: 0,
- showSymbol: false,
- lineStyle: {
- width: 1,
- },
- areaStyle: {
- color: new (echarts as any).graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(79, 128, 255, 0.165)",
- },
- {
- offset: 0.8,
- color: "rgba(79, 128, 255, 0)",
- },
- ],
- false
- ),
- shadowColor: "rgba(79, 128, 255,0.1)",
- shadowBlur: 10,
- },
- itemStyle: {
- color: "rgba(79, 128, 255, 1)",
- borderColor: "rgba(79, 128, 255, 1)",
- borderWidth: 12,
- },
- data: seriesData1,
- },
- {
- name: "湿度",
- type: "line",
- smooth: true,
- symbol: "circle",
- symbolSize: 5,
- showSymbol: false,
- yAxisIndex: 1,
- lineStyle: {
- width: 1,
- },
- areaStyle: {
- color: new (echarts as any).graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(137,189,27, 0.3)",
- },
- {
- offset: 0.8,
- color: "rgba(137,189,27, 0.165)",
- },
- ],
- false
- ),
- shadowColor: "rgba(79, 128, 255,0.1)",
- shadowBlur: 10,
- },
- itemStyle: {
- color: "rgb(137,189,27)",
- borderColor: "rgba(137,189,2,1)",
- borderWidth: 12,
- },
- data: seriesData2,
- },
- ],
- } as EChartsOption;
- if (xData && xData.length) {
- if (
- proxyData.checkIsData(seriesData1) ||
- proxyData.checkIsData(seriesData2)
- ) {
- proxyData.activeItem.options = options;
- proxyData.activeItem.showNowData = 0;
- } else {
- proxyData.activeItem.options = null;
- // 暂位配置服务时间
- proxyData.activeItem.showNowData = 1;
- }
- } else {
- proxyData.activeItem.options = null;
- // 暂位配置服务时间
- proxyData.activeItem.showNowData = 2;
- }
- },
- setMax(funcid: any = "", dayTarget: any) {
- let max = 0;
- switch (funcid) {
- case "CO2":
- for (let i = 0; i < dayTarget.length; i++) {
- if (dayTarget[i].co2Max) {
- max = dayTarget[i].co2Max;
- }
- }
- break;
- case "PM2d5":
- for (let i = 0; i < dayTarget.length; i++) {
- if (dayTarget[i].pm25Max) {
- max = dayTarget[i].pm25Max;
- }
- }
- break;
- case "HCHO":
- // max = dayTarget && dayTarget[0] && dayTarget[0].hchoMax;
- for (let i = 0; i < dayTarget.length; i++) {
- if (dayTarget[i].hchoMax) {
- max = dayTarget[i].hchoMax;
- }
- }
- break;
- case "RH":
- max = 0;
- break;
- case "Tdb":
- // max = dayTarget[0].temperatureMax;
- max = 0;
- break;
- default:
- break;
- }
- return max;
- },
- });
- watch(
- props,
- (newProps: any) => {
- proxyData.query = JSON.parse(JSON.stringify(newProps.query));
- proxyData.setActiveItem();
- proxyData.queryAllData();
- // 设置当前选中的tab
- },
- {
- deep: true,
- immediate: true,
- }
- );
- onMounted(() => {
- // proxyData.setActiveItem();
- // proxyData.queryAllData();
- // const route: any = useRoute();
- // if (route.query) {
- // proxyData.query = route.query;
- // // 设置当前选中的tab
- // proxyData.setActiveItem();
- // proxyData.queryAllData();
- // }
- });
- return {
- ...toRefs(proxyData),
- };
- },
- });
- </script>
- <style lang="scss" scoped>
- .detail-content {
- width: 100%;
- height: 100%;
- .title {
- padding-bottom: 14px;
- font-family: "PingFang SC";
- font-style: normal;
- font-weight: 500;
- font-size: 22px;
- line-height: 31px;
- color: #000000;
- }
- }
- .container-text {
- font-family: PingFang SC;
- padding-top: 17px;
- background: #fff;
- font-weight: 500;
- font-size: 16px;
- line-height: 22px;
- text-align: center;
- color: #000000;
- text-align: center;
- }
- .chart-box {
- width: 100%;
- height: 280px;
- padding-top: 10px;
- background: #fff;
- }
- .detail-desc {
- // padding: 0 15px;
- margin-top: 20px;
- padding-left: 15px;
- display: flex;
- .detail-title {
- display: inline-block;
- margin-right: 22px;
- vertical-align: middle;
- width: 64px;
- height: 85px;
- line-height: 85px;
- text-align: center;
- background: #fff;
- border-radius: 5px;
- font-size: 18px;
- align-items: center;
- text-align: center;
- color: #140050;
- }
- .detail-text {
- flex: 86px 1;
- display: inline-block;
- font-family: PingFang SC;
- color: #4d5262;
- vertical-align: middle;
- p {
- position: relative;
- margin-bottom: 10px;
- // padding-bottom: 10px;
- }
- .icon {
- position: absolute;
- top: 7px;
- left: 0;
- display: inline-block;
- vertical-align: middle;
- font-size: 12px;
- }
- .circle {
- display: inline-block;
- vertical-align: middle;
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background: $elCircle;
- }
- .tem-span {
- display: inline-block;
- vertical-align: middle;
- padding-bottom: 5px;
- font-style: normal;
- font-weight: 400;
- font-size: 13px;
- line-height: 20px;
- color: #646c73;
- padding-left: 15px;
- }
- }
- }
- .detail-bottom {
- padding: 0 15px;
- padding-bottom: 30px;
- padding-top: 40px;
- width: 100%;
- font-weight: 500;
- font-size: 14px;
- line-height: 12px;
- color: #140050;
- .text-img {
- width: 100%;
- padding-top: 20px;
- img {
- width: 100%;
- margin: 0 auto;
- }
- }
- }
- </style>
- <style lang="scss">
- .detail-content {
- .van-tabs__content {
- width: 100%;
- //height: 280px;
- //padding-left: 22px;
- //padding-right: 22px;
- //padding-top: 10px;
- }
- .van-tab__panel {
- width: 100%;
- height: 100%;
- }
- .van-tabs__line {
- display: none;
- }
- .van-tab__text {
- display: inline-block;
- padding: 3px;
- // font-size: 16px;
- color: #c4c4c4;
- width: 100%;
- height: 100%;
- line-height: 44px;
- text-align: center;
- font-style: normal;
- font-weight: 700;
- font-size: 14px;
- }
- .van-tab--active {
- .van-tab__text {
- color: #fff;
- background: #ffffff;
- border-radius: 4px;
- color: $elActiveColor;
- // background: $elActiveColor;
- }
- }
- .van-tabs__wrap {
- // position: fixed;
- padding: 2px;
- width: 100%;
- height: 50px;
- border-radius: 4px;
- //top: 48px;
- top: 0;
- background: #f2f3f5;
- left: 0;
- z-index: 333;
- }
- .van-tabs__nav--line {
- background: #f2f3f5;
- border-radius: 4px;
- }
- .van-tabs__content {
- //padding-top: 42px;
- //padding-top: 10px;
- }
- }
- </style>
|