From 9453119e98fa15b974ff4e47eb184efb5a224c2b Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Fri, 6 Jan 2023 16:14:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=BF=E5=B1=8B=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/shuju/renfang/house-logo.png       | Bin 0 -> 846 bytes
 src/assets/scss/dataBoard/bread.scss          |   4 +
 .../cpts/screen-echarts-frame/index.vue       | 159 +++++++
 .../dataBoard/renfang/cpts/fwBarOption.js     | 130 ++++++
 .../dataBoard/renfang/cpts/fwPieOption.js     |  93 +++++
 src/views/dataBoard/renfang/cpts/fwgl.vue     | 393 +++++++++++++++++-
 6 files changed, 774 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/images/shuju/renfang/house-logo.png
 create mode 100644 src/views/dataBoard/cpts/screen-echarts-frame/index.vue
 create mode 100644 src/views/dataBoard/renfang/cpts/fwBarOption.js
 create mode 100644 src/views/dataBoard/renfang/cpts/fwPieOption.js

diff --git a/src/assets/images/shuju/renfang/house-logo.png b/src/assets/images/shuju/renfang/house-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ebb8c86cd76ad8e2451def5f3878b8290148619
GIT binary patch
literal 846
zcmV-U1F`&xP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px&2uVaiR9HvtmQRRO1sume-`QzfH0aW4c7g&63ZX+tr=W}wHi}eGkRWWyZQi>i
zVs$g9Lt#h|Gozpt#bOl77Lrleda$F1f)c@sbl-T8$c0K)eeWCZ?VH&#b?1#a+QHxD
z@rK{;_dfIcFK)8vCV!tx0IEAZ=9rC$rG0=Uz<2jO!1lwB>tY{vnQ8~1y4%Z=IgSD4
zex2m{TU(*t>DRUcP^o)8@Ck6FRN~#jj?5#8*($L=3beMcU9Pwgfrd9EW)j%j3bmoA
zqiWNulZ5?<saBxXMeW*pw*Y!Zpi=iiiHlL7r_->FHhc&;+s^mEQ&6efh`1G~{NSe^
zK6{2a!MP~Zk`(Cw1n_ei)}IV?w4XxknS#-VKf=UOsEv6F(pH^~0!>^Jfp%MoA0+m8
z36s(D`n?xSPk>$yx>9glW~rf?O*nBLGgT__{`gCL^SYEy%**6@0!(eHv37TpRW>gm
zp0OFuVNPK_ED!U+Z!hZCZi=1&Y2l>?KdsaG^ttRy-+t#QlA{y4uvih^zsq<174sZ0
zZnHce{1!|L_Ke)az7u0g3wmCvSDA#BhJO@U8$M)P)h5SnW?P|F6zzh$>s}FymoaOA
zkvu8~qd;T50j^UUjyC+1%>jw;ZBCcO;h8{h7XgSR;waGY!@GRj>6kgp->p!06pcXM
zJ#B#OpBLT*m8Q1|lBlLPGDl6nDfn}yrnmmphUWx-bR3JxnLw|!-@78vA3)DG-03w*
z%)Tq=eclT7?BD?w*71Rnp{(jN`DH@0-B5#zK*4+9ngK=|&iel{F{`3b(_ND=5yYJu
zFdxr^8voBJ$hP79Xw3$X)0@#qC7y_C`u4^E<m)&EsMP&6@Z=Q$7Cp(XIR)MKz%77*
zMc}b%mropHOJdUL_LYWstzEs2d6g20#P;;JBw?M*y$rEea1yi92|FaFDY5x#gG=Vo
zB;h@!JD|o&N%O^>&*?90vZM1xh{TR4(3S;&rZ;11X?qPCz~X{nTNLQC4#1#4x|sie
Y0BJF?KdZ$T{{R3007*qoM6N<$g3+6ws{jB1

literal 0
HcmV?d00001

diff --git a/src/assets/scss/dataBoard/bread.scss b/src/assets/scss/dataBoard/bread.scss
index 62d666431..57fd47a13 100644
--- a/src/assets/scss/dataBoard/bread.scss
+++ b/src/assets/scss/dataBoard/bread.scss
@@ -38,6 +38,10 @@
         padding: 0 5px;
       }
     }
+    .router_parents:hover {
+      cursor: pointer;
+    }
+
 
     .router_child{
       line-height: 25px;
diff --git a/src/views/dataBoard/cpts/screen-echarts-frame/index.vue b/src/views/dataBoard/cpts/screen-echarts-frame/index.vue
new file mode 100644
index 000000000..11b9fd232
--- /dev/null
+++ b/src/views/dataBoard/cpts/screen-echarts-frame/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="screenEchartsFrame"
+       ref="screenEchartsFrame"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'screen-echarts-frame',
+  data () {
+    return {
+      myChart: ''
+    }
+  },
+  props: {
+    chartMethod: {
+      type: Function
+    }
+  },
+  mounted () {
+    this.initChart()
+    window.onresize = () => {
+      this.myChart.resize()
+    }
+  },
+  beforeDestroy () {
+    // 销毁echarts实例对象
+    if (this.myChart) this.myChart.dispose()
+  },
+  watch: {},
+  methods: {
+    initChart () {
+      this.$nextTick(() => {
+        const dom = this.$refs.screenEchartsFrame
+        this.myChart = echarts.init(dom)
+        // this.myChart.setOption(this.chartMethod())
+        this.$emit('myChartMethod', this.myChart)
+      })
+    },
+    // 配置option
+    setOption (option) {
+      this.myChart.setOption(option)
+    },
+    // 获取option
+    getOption () {
+      if (this.myChart) {
+        return this.myChart.getOption()
+      } else {
+        return null
+      }
+    },
+    //
+    resize () {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    clear () {
+      if (this.myChart) {
+        this.myChart.clear()
+      }
+    },
+    showLoading () {
+      if (this.myChart) {
+        this.$nextTick(() => {
+          this.myChart.showLoading({
+            text: '',
+            color: '#29cdff',
+            textColor: '#29cdff',
+            maskColor: 'rgba(255, 255, 255, 0)',
+            zlevel: 0
+          })
+        })
+      }
+    },
+    hideLoading () {
+      if (this.myChart) {
+        this.myChart.hideLoading()
+      }
+    },
+    // 启动动画时使用
+    tooltipAnimate (chart, length) {
+      // 清除上一次动画
+      this.timeTicket && clearInterval(this.timeTicket)
+      const count = 0
+      // 启动动画
+      this._action(chart, count, length)
+      chart && // 移除动画
+        chart.on('mouseover', params => {
+          this._cleanAction(chart, params)
+        })
+      // 重写启动动画
+      chart &&
+        chart.on('mouseout', () => {
+          this._action(chart, count, length)
+        })
+    },
+    // tooltip动画action
+    _action (chart, count, length) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      this.timeTicket = setInterval(() => {
+        if (!chart) {
+          clearInterval(this.timeTicket)
+          return
+        }
+        chart &&
+          chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        count++
+      }, 1000 * 3)
+    },
+    _cleanAction (chart, params) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      if (!chart) {
+        clearInterval(this.timeTicket)
+        return
+      }
+      chart &&
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screenEchartsFrame {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/dataBoard/renfang/cpts/fwBarOption.js b/src/views/dataBoard/renfang/cpts/fwBarOption.js
new file mode 100644
index 000000000..9ae582204
--- /dev/null
+++ b/src/views/dataBoard/renfang/cpts/fwBarOption.js
@@ -0,0 +1,130 @@
+import * as echarts from 'echarts'
+export function barOption () {
+
+  return {
+    title: {
+      text: '单位（户）',
+      left: 5,
+      textStyle: {
+      
+        fontSize: 14,
+        color: " rgba(255,255,255,0.65)",
+        fontWeight: 400,
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    // legend: {},
+    grid: {
+      top:40,
+      left: '3%',
+      right: '4%',
+      bottom: 19,
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisLine: {
+          lineStyle: {
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          }
+        },
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+
+        data: []
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        max : 1000,
+        splitNumber : 5,
+        splitLine: { 
+          show: true, 
+          lineStyle:{ 
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          } 
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+      }
+    ],
+    series: [
+  
+      {
+        name: '自住房屋',
+        type: 'bar',
+        stack: 'Ad',
+        barWidth:12,
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#6FDEFF' },
+            { offset: 1, color: 'rgba(168,241,255,0)' }
+          ])
+        },
+        data: []
+      },
+      {
+        name: '出租房屋',
+        type: 'bar',
+        barWidth:12,
+        stack: 'Ad',
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#1A95FF' },
+            { offset: 1, color: 'rgba(168,241,255,0)' }
+          ])
+        },
+        data: []
+      },
+      {
+        name: '闲置房屋',
+        type: 'bar',
+        barWidth:12,
+        stack: 'Ad',
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#FFAA00' },
+            { offset: 1, color: 'rgba(168,241,255,0)' }
+          ])
+        },
+        data: []
+      },
+      
+     
+    ]
+
+  }
+}
diff --git a/src/views/dataBoard/renfang/cpts/fwPieOption.js b/src/views/dataBoard/renfang/cpts/fwPieOption.js
new file mode 100644
index 000000000..c7ca041d4
--- /dev/null
+++ b/src/views/dataBoard/renfang/cpts/fwPieOption.js
@@ -0,0 +1,93 @@
+import * as echarts from 'echarts'
+export function pieOption() {
+  const center = ["50%", "170px"];
+  return {
+    title: {
+      text: "0",
+      top: 45,
+      left: "center",
+      textStyle: {
+        width: "100%",
+        fontSize: 24,
+        color: "#FFFFFF",
+        fontWeight: 400,
+      },
+      itemGap: 5,
+      // subtext: "总数",
+      // subtextStyle: {
+      //   fontSize: 20,
+      //   color: "#fff",
+      //   fontWeight: 400,
+      // },
+    },
+    tooltip: {
+      show: false,
+    },
+    // legend: {
+    // top: 350,
+    // bottom: 0,
+    // itemWidth: 20,
+    // itemHeight: 10,
+    // textStyle: {
+    //   color: '#D2E7FF',
+    //   fontSize: 16,
+    //   lineHeight: 20,
+    // },
+
+    // },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['60%', '90%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        // emphasis: {
+        //   label: {
+        //     show: true,
+        //     fontSize: 40,
+        //     fontWeight: 'bold'
+        //   }
+        // },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          normal: {
+              color: (list) => {
+                // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
+                var colorList = [
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#6FDEFF'                     
+                  },
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#FFAA00'
+                  },
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#1A95FF'
+                  },
+                 
+                ]
+                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
+                    offset: 0,
+                    color: colorList[list.dataIndex]['colorStart']
+                }, {
+                    offset: 1,
+                    color: colorList[list.dataIndex]['colorEnd']
+                }])                                    
+              }
+          }
+      },
+
+        data: [
+        ]
+      }
+    ]
+  };
+}
diff --git a/src/views/dataBoard/renfang/cpts/fwgl.vue b/src/views/dataBoard/renfang/cpts/fwgl.vue
index edaf98176..bc382af13 100644
--- a/src/views/dataBoard/renfang/cpts/fwgl.vue
+++ b/src/views/dataBoard/renfang/cpts/fwgl.vue
@@ -1,9 +1,124 @@
 <template>
-  <div>房屋概览</div>
+  <div>
+    <div class="main">
+      <div class="g-pie">
+        <div class="pie-left">
+          <screen-echarts-frame class=""
+                                @myChartMethod="pieInitOk"
+                                ref="pieChart"></screen-echarts-frame>
+        </div>
+        <div class="pie-legend">
+          <div class="item">
+            <div class="item-logo logo1"></div>
+            <div class="item-name">自住房屋</div>
+          </div>
+          <div class="item">
+            <div class="item-logo logo2"></div>
+            <div class="item-name">出租房屋</div>
+          </div>
+          <div class="item">
+            <div class="item-logo logo3"></div>
+            <div class="item-name">闲置房屋</div>
+          </div>
+        </div>
+        <div class="pie-right">
+          <div class="right-row">
+            <div class="row-item">
+              <div class="item-one">
+                <img class="img"
+                     src="@/assets/images/shuju/renfang/house-logo.png"
+                     alt />
+                <div class="title">房屋总数</div>
+              </div>
+              <div class="item-two">
+                <div class="num">2818</div>
+                <div class="unit">户</div>
+              </div>
+
+            </div>
+
+            <div class="row-item marginleft10">
+              <div class="item-one">
+                <img class="img"
+                     src="@/assets/images/shuju/renfang/house-logo.png"
+                     alt />
+                <div class="title">自住房屋</div>
+              </div>
+              <div class="item-two">
+                <div class="num">2642</div>
+                <div class="unit">户</div>
+              </div>
+
+            </div>
+          </div>
+          <div class="right-row margintop18">
+            <div class="row-item">
+              <div class="item-one">
+                <img class="img"
+                     src="@/assets/images/shuju/renfang/house-logo.png"
+                     alt />
+                <div class="title">出租房屋</div>
+              </div>
+              <div class="item-two">
+                <div class="num">818</div>
+                <div class="unit">户</div>
+              </div>
+
+            </div>
+
+            <div class="row-item marginleft10">
+              <div class="item-one">
+                <img class="img"
+                     src="@/assets/images/shuju/renfang/house-logo.png"
+                     alt />
+                <div class="title">闲置房屋</div>
+              </div>
+              <div class="item-two">
+                <div class="num">316</div>
+                <div class="unit">户</div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="g-bar">
+        <div class="bar-title">
+
+          <img class="title_img"
+               src="@/assets/images/index/list-logo.png"
+               alt />
+          <div class="tip_title">近一年房屋状态变化趋势图</div>
+          <div class="title_line"></div>
+
+        </div>
+        <div class="bar-legend">
+          <div class="item-logo logo1"></div>
+          <div class="item-name">自住房屋</div>
+          <div class="item-logo logo2 marginleft10"></div>
+          <div class="item-name">出租房屋</div>
+          <div class="item-logo logo3 marginleft10"></div>
+          <div class="item-name">闲置房屋</div>
+        </div>
+        <div class="bar-main">
+          <screen-echarts-frame class=""
+                                @myChartMethod="barInitOk"
+                                ref="barChart"></screen-echarts-frame>
+        </div>
+
+      </div>
+
+      <!-- <screen-nodata class="nodata"
+                     v-if="showNoData"></screen-nodata> -->
+    </div>
+  </div>
 </template>
 
 <script>
 import { requestPost } from "@/js/dai/request";
+import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+import { pieOption } from './fwPieOption.js'
+import { barOption } from './fwBarOption.js'
 
 export default {
   props: {
@@ -12,10 +127,278 @@ export default {
       default: "",
     },
   },
-  data() {},
-  mounted() {},
-  methods: {},
+  components: {
+    screenEchartsFrame
+  },
+  // mixins: [animate]
+  beforeDestroy () {
+    this.timer && clearInterval(this.timer)
+  },
+  data () {
+    return {
+      showNoData: false,
+      timer: null,
+      barChart: '',
+      pieChart: '',
+      pieOption: {},
+      barOption: {},
+      pieInitState: false,
+      barInitState: false,
+      pieData: []
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    pieInitOk () {
+
+      this.pieInitState = true
+    },
+    barInitOk () {
+      this.barInitState = true
+    },
+    getData () {
+      this.getBar()
+      this.getPie()
+    },
+    getBar () {
+      if (this.barInitState) {
+        this.getBarChart()
+      } else {
+        setTimeout(() => {
+          this.getBar()
+        }, 500)
+      }
+    },
+    getPie () {
+      if (this.pieInitState) {
+        this.getPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async getPieChart () {
+
+      this.$refs.pieChart.clear()
+      // this.$refs.pieChart.showLoading()
+
+      // 获取pieChart配置
+      this.pieOption = pieOption()
+
+      // 设置三个配置值
+      this.pieOption.title.text = '73%'
+      this.pieData = [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' }
+      ]
+      this.pieOption.series[0].data = this.pieData;
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.pieChart.setOption(this.pieOption)
+    },
+
+    // 获取饼状图
+    async getBarChart () {
+      this.showNoData = false
+      this.$refs.barChart.clear()
+      // this.$refs.barChart.showLoading()
+
+
+      // this.$refs.barChart.hideLoading()
+      let xaxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      let series = [
+        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
+        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
+        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] }
+      ]
+
+      // if (res.data.xaxis && res.data.xaxis.length > 0) {
+      //   const {
+      //     xaxis,
+      //     totalIndexData,
+      //     serviceAbilityData,
+      //     partyDevAbilityData,
+      //     governAbilityData
+      //   } = res.data
+
+      //   this.barOption = barOption()
+      //   this.$refs.barChart.hideLoading()
+      //   this.$refs.barChart.setOption(this.barOption, true)
+      //   this.$refs.barChart.setOption({
+      //     xAxis: { data: xaxis },
+      //     series: [
+      //       { data: totalIndexData },
+      //       { data: partyDevAbilityData },
+      //       { data: governAbilityData },
+      //       { data: serviceAbilityData }
+      //     ]
+      //   }, true)
+      // } else {
+      //   this.showNoData = true
+      // }
+
+      this.barOption = barOption()
+      // this.$refs.barChart.hideLoading()
+      this.$refs.barChart.setOption(this.barOption, true)
+      this.$refs.barChart.setOption({
+        xAxis: { data: xaxis },
+        series: series
+      }, true)
+    }
+
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.main {
+  height: 100%;
+  width: 100%;
+
+  .g-pie {
+    margin-top: 24px;
+    display: flex;
+    justify-content: space-around;
+
+    .pie-left {
+      height: 120px;
+      flex: 0 0 120px;
+    }
+
+    .pie-legend {
+      .item {
+        display: flex;
+        margin-bottom: 12px;
+      }
+    }
+    .pie-right {
+      .right-row {
+        display: flex;
+        // justify-content: space-between;
+
+        .row-item {
+          flex: 0 0 100px;
+          .item-one {
+            display: flex;
+            .img {
+              width: 15px;
+              height: 15px;
+            }
+            .title {
+              margin-left: 9px;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.65);
+            }
+          }
+
+          .item-two {
+            margin-top: 8px;
+            display: flex;
+            align-items: flex-end;
+            margin-left: 23px;
+
+            .num {
+              font-size: 24px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #ffffff;
+            }
+
+            .unit {
+              margin-left: 9px;
+              font-size: 14px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #ffffff;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .g-bar {
+    position: relative;
+    margin-top: 14px;
+
+    .bar-title {
+      display: flex;
+      align-items: center;
+      // margin-left: 24px;
+
+      .title_img {
+        width: 17px;
+        height: 17px;
+      }
+      .tip_title {
+        margin-left: 8px;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 22px;
+      }
+
+      .title_line {
+        margin-left: 8px;
+        width: 244px;
+        height: 1px;
+        background: linear-gradient(
+          270deg,
+          rgba(55, 198, 255, 0.1) 0%,
+          #1995ff 100%
+        );
+      }
+    }
+
+    .bar-legend {
+      position: absolute;
+      top: 37px;
+      right: 20px;
+      display: flex;
+    }
+
+    .bar-main {
+      margin-top: 10px;
+      height: 185px;
+    }
+  }
+}
+
+.item-name {
+  margin-left: 8px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #8c8c8c;
+}
+
+.item-logo {
+  margin-top: 2px;
+  width: 8px;
+  height: 8px;
+}
+
+.logo1 {
+  background: #6fdeff;
+}
+.logo2 {
+  background: #ffaa00;
+}
+.logo3 {
+  background: #1a95ff;
+}
+.marginleft10 {
+  margin-left: 10px;
+}
+
+.margintop18 {
+  margin-top: 18px;
+}
+</style>