Merge remote-tracking branch 'origin/build' into build

components/layout/AiDvTable/AiDvTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="aiDvTable" :class="'aiDvTable-' + theme">
+  <div class="aiDvTable" :class="'aiDvTable-' + theme + ' aiDvTable-' + size">
     <div class="header" :style="headerStyle">
       <span
         v-for="(item, index) in header"
@@ -25,7 +25,13 @@
             flex: config[i].width ? 'inherit' : 1
           }">
           <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
-          <span :title="column.v">{{ column.v }}</span>
+          <render-slot
+            v-if="config[i].render"
+            :render="config[i].render"
+            :row="item"
+            :column="column">
+          </render-slot>
+          <span v-else :title="column" @click="onClick(config[i], item)">{{ column }}</span>
         </div>
       </div>
     </div>
@@ -36,6 +42,26 @@
   export default {
     name: 'AiDvTable',
 
+    components: {
+      renderSlot: {
+        functional: true,
+        props: {
+          render: Function,
+          column: {type: [String, Number] },
+          row: {type: [Array, Object] },
+        },
+        render: (h, data) => {
+          let params = {
+            row: data.props.row
+          }
+          if (data.props.column) {
+            params.column = data.props.column
+          }
+          return data.props.render(h, params)
+        }
+      }
+    },
+
     props: {
       data: {
         type: Array,
@@ -65,6 +91,11 @@
       config: {
         type: Array,
         default: () => []
+      },
+
+      size: {
+        type: String,
+        default: 'small'
       }
     },
 
@@ -109,12 +140,14 @@
         })
 
         this.body = bodyKey.map(v => {
-          return value.map(e => {
+          return value.map(e => e[v])
-            return {
+        })
-              v: e[v]
+      },
+
+      onClick (config, e) {
+        if (config.click && typeof config.click === 'function') {
+          return config.click.call(this, e)
         }
-          })
-        })
       }
     }
   }
@@ -227,6 +260,16 @@
       }
     }
 
+    &.aiDvTable-mini {
+      .header {
+        height: 36px;
+      }
+
+      .row {
+        height: 40px;
+      }
+    }
+
     &.aiDvTable-1 {
       ::-webkit-scrollbar {
         width: 5px;

packages/bigscreen/dv/AppQxnDv.vue

@@ -113,8 +113,25 @@
               </div>
             </div>
           </div>
-          <div class="wrapper">
+          <div class="wrapper" style="position: relative;">
             <DvMap style="width: 100%; height: 356px;"></DvMap>
+            <div class="total-info">
+              <div class="total-info__item">
+                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon3.png">
+                <span>民警人数</span>
+                <i>214</i>
+              </div>
+              <div class="total-info__item">
+                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon2.png">
+                <span>辅警人数</span>
+                <i>214</i>
+              </div>
+              <div class="total-info__item">
+                <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/icon1.png">
+                <span>其他</span>
+                <i>214</i>
+              </div>
+            </div>
           </div>
           <div class="right-middle__middle">
             <div class="wrapper">
@@ -214,6 +231,7 @@
 
     data ()  {
       return {
+        isShowInfo: false,
         value: '',
         lineData: [
           {
@@ -374,7 +392,7 @@
           xAxis: {
             type: "category",
             axisTick: {show: false},
-            axisLine: {show: false},
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
             axisLabel: {color: '#8FABBF', fontSize: 12},
           },
           yAxis: {
@@ -445,6 +463,8 @@
         barChart: {
           xAxis: {
             type: "category",
+            axisTick: {show: false},
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
             axisLabel: {color: '#8FABBF', fontSize: 12},
           },
           yAxis: {
@@ -531,6 +551,12 @@
             right: '6%',
             bottom: '6%'
           },
+          yAxis: {
+            axisLine: {show: false},
+          },
+          xAxis: {
+            axisLine: {show: false},
+          },
           color: ['#59F7CA', '#62F2F8', '#F2B949', '#81C4E4', '#D8F2FD'],
           series: [
             {
@@ -549,7 +575,7 @@
                 normal: {
                   textStyle: {
                     color: '#9BB7D4',
-                    fontSize: 16
+                    fontSize: 14
                   }
                 }
               }
@@ -611,6 +637,43 @@
       margin-bottom: 12px;
     }
 
+    .total-info {
+      display: flex;
+      position: absolute;
+      flex-direction: column;
+      right: 11px;
+      top: 26px;
+      z-index: 11;
+
+      .total-info__item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 11px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        img {
+          width: 22px;
+          height: 22px;
+        }
+
+        span {
+          width: 60px;
+          margin: 0 16px 0 6px;
+          color: #C6D6E6;
+          font-size: 14px;
+        }
+
+        i {
+          font-style: normal;
+          font-size: 16px;
+          color: #fff;
+        }
+      }
+    }
+
     .AppQxnDv-title {
       display: flex;
       position: relative;
@@ -763,7 +826,6 @@
 
         .right-left__middle {
           display: flex;
-
           .left {
             width: 245px;
             margin-right: 12px;

packages/bigscreen/dv/AppQxnEventDv.vue

@@ -39,10 +39,10 @@
                 <h2>上报来源分布</h2>
               </div>
               <ai-echart-v2
-                style="height: 230px; width: 100%;"
+                style="height: 220px; width: 100%; margin-top: 10px;"
-                :ref="'chart2'"
+                :ref="'chart1'"
-                :data="lineData1"
+                :data="chartData1"
-                :ops="lineChart1">
+                :ops="chartConfig1">
               </ai-echart-v2>
             </div>
             <div class="wrapper">
@@ -50,10 +50,10 @@
                 <h2>事件办理情況</h2>
               </div>
               <ai-echart-v2
-                style="height: 230px; width: 100%;"
+                style="height: 220px; width: 100%; margin-top: 10px;"
                 :ref="'chart2'"
-                :data="lineData1"
+                :data="chartData2"
-                :ops="lineChart1">
+                :ops="chartConfig2">
               </ai-echart-v2>
             </div>
           </div>
@@ -84,6 +84,7 @@
               <AiDvTable
                 style="margin-top: 16px; height: 220px;"
                 stripe="1"
+                size="mini"
                 :headerStyle="{
                   color: '#02FEFF',
                   fontSize: '12px',
@@ -97,13 +98,18 @@
           </div>
           <div class="right-left__bottom">
             <div class="AppQxnDv-title">
-              <h2>增长情况</h2>
+              <div class="left AppQxnDv-title__tab">
+                <h2 @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">隐患上报</h2>
+                <h2 @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">咨询服务</h2>
+                <h2 @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">矛盾调解</h2>
+                <h2 @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">其他</h2>
+              </div>
             </div>
             <ai-echart-v2
               style="height: 236px; margin-top: 10px; width: 100%;"
-              :ref="'chart'"
+              :ref="'chart3'"
-              :data="chart3Data"
+              :data="chartData3"
-              :ops="chart3Config">
+              :ops="chartConfig3">
             </ai-echart-v2>
           </div>
         </AiDvPanel>
@@ -124,11 +130,37 @@
           </div>
           <div class="right-middle__bottom">
             <div class="AppQxnDv-title">
-              <h2>近期成员使用分布</h2>
+              <h2>事件列表</h2>
+              <div class="right">
+                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
+                  <el-option label="XXX派出所" value="1"></el-option>
+                  <el-option label="XXX派出所" value="2"></el-option>
+                  <el-option label="XXX派出所" value="3"></el-option>
+                </el-select>
+                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
+                  <el-option label="XXX派出所" value="1"></el-option>
+                  <el-option label="XXX派出所" value="2"></el-option>
+                  <el-option label="XXX派出所" value="3"></el-option>
+                </el-select>
+                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
+                  <el-option label="XXX派出所" value="1"></el-option>
+                  <el-option label="XXX派出所" value="2"></el-option>
+                  <el-option label="XXX派出所" value="3"></el-option>
+                </el-select>
+                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
+                  <el-option label="XXX派出所" value="1"></el-option>
+                  <el-option label="XXX派出所" value="2"></el-option>
+                  <el-option label="XXX派出所" value="3"></el-option>
+                </el-select>
+                <el-input placeholder="关键词" style="width: 98px;">
+                  <el-button slot="append" icon="el-icon-search"></el-button>
+                </el-input>
+              </div>
             </div>
             <AiDvTable
               style="margin-top: 16px; height: 430px;"
               :heigth="'100%'"
+              size="mini"
               stripe="1"
               :headerStyle="{
                 color: '#02FEFF',
@@ -136,9 +168,8 @@
                 fontWeight: '600',
                 backgroundColor: 'rgba(33, 180, 253, 0.1)'
               }"
-              isShowIndex="1"
+              :config="eventTableConfig"
-              :config="tableConfig"
+              :data="eventTableData">
-              :data="tableData">
             </AiDvTable>
           </div>
         </AiDvPanel>
@@ -179,22 +210,64 @@
     data ()  {
       return {
         value: '',
-        lineData1: [
+        currIndex: 0,
+        chartData2: [
           {
             "name": "1月",
-            "v1": 23
+            "已办理": 4,
+            "待处理": 44,
+            "处理中": 23,
+            "已拒绝": 11
           },
           {
             "name": "2月",
-            "v1": 12
+            "已办理": 2,
+            "待处理": 24,
+            "处理中": 23,
+            "已拒绝": 11
           },
           {
             "name": "3月",
-            "v1": 67
+            "已办理": 44,
+            "待处理": 14,
+            "处理中": 2,
+            "已拒绝": 11
           },
           {
             "name": "4月",
-            "v1": 98
+            "已办理": 4,
+            "待处理": 44,
+            "处理中": 3,
+            "已拒绝": 1
+          },
+          {
+            "name": "5月",
+            "已办理": 4,
+            "待处理": 4,
+            "处理中": 23,
+            "已拒绝": 11
+          }
+        ],
+        chartData1: [
+          {
+            "name": "1月",
+            "警格上报": 23,
+            "居民上报": 23
+          },
+          {
+            "name": "2月",
+            "警格上报": 23,
+            "居民上报": 23
+          },
+          {
+            "name": "3月",
+            "警格上报": 23,
+            "居民上报": 23
+          },
+          {
+            "name": "4月",
+            "警格上报": 23,
+            "居民上报": 23
           }
         ],
         tableData: [
@@ -252,20 +325,31 @@
           },
           {
             name: '联系TA',
-            v1: '12',
+            v1: '联系TA',
-            v2: '12',
+            v2: '联系TA',
-            v3: '123',
+            v3: '联系TA',
-            v4: '123',
+            v4: '联系TA',
-            v5: '123',
+            v5: '联系TA',
-            v6: '123',
+            v6: '联系TA',
-            v7: '2',
+            v7: '联系TA',
-            v8: '123',
+            v8: '联系TA',
-            v9: '123',
+            v9: '联系TA',
-            v10: '1234'
+            v10: '联系TA'
           }
         ],
-        lineChart1: {
+        chartConfig1: {
-          legend: { show: false },
+          legend: {
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '40px',
+            containLabel: true
+          },
           tooltip: {
             trigger: 'axis',
             backgroundColor: 'rgba(0, 102, 154, 0.65)',
@@ -273,11 +357,64 @@
             textStyle: { color: '#fff' },
             axisPointer: { type: 'cross' }
           },
-          color: ['#7AA3CC', '#33CCCC'],
+          color: ['#33CCCC', '#DBB36E'],
           xAxis: {
             type: "category",
             axisTick: {show: false},
-            axisLine: {show: false},
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
+            axisLabel: {color: '#8FABBF', fontSize: 12}
+          },
+          yAxis: {
+            nameGap: 23,
+            minInterval: 1,
+            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
+            axisLabel: {color: '#8FABBF', fontSize: 12},
+            axisPointer: { snap: true }
+          },
+          series: [
+            {
+              name: '警格上报',
+              type: 'bar',
+              barWidth: '15',
+              stack: 'one'
+            },
+            {
+              name: '居民上报',
+              barWidth: '15',
+              type: 'bar',
+              stack: 'one'
+            }
+          ]
+        },
+        chartConfig2: {
+          legend: {
+            itemWidth: 16,
+            itemGap: 4,
+            textStyle: {
+              color: "#fff",
+              fontSize: '12'
+            },
+            icon: 'roundRect'
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '40px',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(0, 102, 154, 0.65)',
+            borderColor: 'rgba(0, 102, 154, 0.65)',
+            textStyle: { color: '#fff' },
+            axisPointer: { type: 'cross' }
+          },
+          color: ['#33CCCC', '#2C97E8','#BFEAFF', '#DBB36E'],
+          xAxis: {
+            type: "category",
+            axisTick: {show: false},
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
             axisLabel: {color: '#8FABBF', fontSize: 12}
           },
           yAxis: {
@@ -358,7 +495,7 @@
             flex: ''
           }
         ],
-        chart3Data: [
+        chartData3: [
           {
             "name": "人员聚集",
             "已办理": 223,
@@ -395,12 +532,12 @@
             "已拒绝": 23
           }
         ] ,
-        chart3Config: {
+        chartConfig3: {
           xAxis: {
             type: "category",
             axisTick: {show: false},
-            axisLine: {show: false},
+            axisLabel: {color: '#8FABBF', fontSize: 12},
-            axisLabel: {color: '#8FABBF', fontSize: 12}
+            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } }
           },
           grid: {
             left: '0%',
@@ -478,13 +615,98 @@
             barCategoryGap: 40,
             itemStyle: {}
           }
+        },
+        eventTableData: [
+          {
+            name: '时间',
+            v1: '04/18',
+            v2: '02/18',
+            v3: '04/18',
+            v4: '04/18',
+            v5: '04/18',
+            v6: '04/18',
+            v7: '04/18',
+            v8: '04/18',
+            v9: '04/18',
+            v10: '04/18'
+          },
+          {
+            name: '事件内容',
+            v1: '咨询如何报考摩托车驾驶咨询如',
+            v2: '咨询如何报考摩托车驾驶咨询如',
+            v3: '咨询如何报考摩托车驾驶咨询如',
+            v4: '咨询如何报考摩托车驾驶咨询如',
+            v5: '咨询如何报考摩托车驾驶咨询如',
+            v6: '咨询如何报考摩托车驾驶咨询如',
+            v7: '咨询如何报考摩托车驾驶咨询如',
+            v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如',
+            v9: '咨询如何报考摩托车驾驶咨询如',
+            v10: '咨询如何报考摩托车驾驶咨询如'
+          },
+          {
+            name: '状态',
+            v1: '已办理',
+            v2: '已办理',
+            v3: '已办理',
+            v4: '已办理',
+            v5: '处理中',
+            v6: '已拒绝',
+            v7: '处理中',
+            v8: '待处理',
+            v9: '处理中',
+            v10: '处理中'
+          },
+          {
+            name: '查看',
+            v1: '详情>>',
+            v2: '详情>>',
+            v3: '详情>>',
+            v4: '详情>>',
+            v5: '详情>>',
+            v6: '详情>>',
+            v7: '详情>>',
+            v8: '详情>>',
+            v9: '详情>>',
+            v10: '详情>>'
           }
+        ]
       }
     },
 
     computed: {
       tableConfig () {
         return this.tableData.map((v, index) => {
+          if (index === 4) {
+            return {
+              color: '#d0e1e8',
+              align: 'center',
+              width: '',
+              fontSize: '12px',
+              flex: '',
+              render: (h, params) => {
+                return h(
+                  'p', {
+                    style: {
+                      width: '52px',
+                      height: '22px',
+                      textAlign: 'center',
+                      lineHeight: '22px',
+                      color: '#D4F2FF',
+                      cursor: 'pointer',
+                      margin: '0 auto',
+                      borderRadius: '4px',
+                      backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
+                    },
+                    on: {
+                      click: e => {
+                        console.log(params)
+                      }
+                    },
+                  }, params.column
+                )
+              }
+            }
+          }
           return {
             color: '#d0e1e8',
             align: '',
@@ -493,6 +715,58 @@
             flex: ''
           }
         })
+      },
+
+      eventTableConfig () {
+        return [
+          {
+            color: '#d0e1e8',
+            align: '',
+            width: '',
+            fontSize: '14px',
+            flex: ''
+          },
+          {
+            color: '#d0e1e8',
+            align: 'left',
+            width: '250',
+            fontSize: '14px',
+            flex: ''
+          },
+          {
+            color: '#d0e1e8',
+            align: 'center',
+            width: '',
+            fontSize: '14px',
+            flex: '',
+            render: (h, params) => {
+              return h(
+                'i', {
+                  style: {
+                    width: '52px',
+                    height: '20px',
+                    textAlgin: 'center',
+                    lineHeight: '20px',
+                    color: '#07B794',
+                    margin: '0 auto',
+                    borderRadius: '2px',
+                    background: 'rgba(19, 246, 201, 0.14)',
+                  }
+                }, params.column
+              )
+            }
+          },
+          {
+            color: '#00AAFF',
+            align: '',
+            width: '',
+            fontSize: '14px',
+            flex: '',
+            click: e => {
+              console.log(e)
+            }
+          }
+        ]
       }
     },
 
@@ -544,12 +818,12 @@
       color: rgba(172, 201, 230, 0.8);
       background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);
 
-      h2 {
+      & > div {
-        position: relative;
+        display: flex;
-        font-size: 16px;
+        align-items: center;
-        font-weight: 500;
-        padding: 0 10px;
 
+        &:first-child {
+          h2:first-child {
             &::after {
               position: absolute;
               bottom: 0;
@@ -561,6 +835,39 @@
               content: ' ';
             }
           }
+        }
+      }
+
+      & > h2 {
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 27px;
+          z-index: 1;
+          width: 9px;
+          height: 2px;
+          background: rgba(41, 77, 102, 1);
+          content: ' ';
+        }
+      }
+
+
+    .AppQxnDv-title__tab {
+        h2 {
+          cursor: pointer;
+        }
+
+        h2.active {
+          color: #fff;
+          font-size: 16px;
+        }
+      }
+      h2 {
+        position: relative;
+        font-size: 16px;
+        font-weight: 500;
+        padding: 0 10px;
+      }
 
       &::after {
         position: absolute;
@@ -654,6 +961,43 @@
       }
     }
 
+    :deep(.el-input) {
+      height: 24px;
+      line-height: 24px;
+
+      input {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        padding: 0 6px;
+        font-size: 12px;
+        color: rgba(179, 229, 229, 1);
+        border: 1px solid #2A7A92;
+        border-radius: 2px;
+        background: transparent;
+
+        &::placeholder {
+          color: rgba(179, 229, 229, 0.6);
+        }
+      }
+
+      .el-input-group__append {
+        padding: 0 16px;
+        background: #007994;
+        border: none;
+        border-radius: 0 2px 2px 0;
+      }
+
+      .el-input__suffix {
+        right: 1px;
+        top: 0px;
+      }
+
+      i {
+        color: #B3E5E5;
+      }
+    }
+
     ::-webkit-scrollbar {
       width: 5px;
       height: 14px;

packages/bigscreen/dv/components/DvMap.vue

@@ -1,6 +1,47 @@
 <template>
   <div class="AiDvMap" v-resize="onDomResize">
     <div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
+    <transition name="fade">
+      <div class="info" v-if="isShowInfo">
+        <div class="info-mask"></div>
+        <div class="info-content">
+          <div class="info-title">
+            <h2>兴仁公安局</h2>
+          </div>
+          <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShowInfo = false" />
+          <div class="info-wrapper">
+            <div class="info-wrapper__item">
+              <label>下属单位：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>居民群：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>成员人数：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>群人数：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>激活比例：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>好友人数：</label>
+              <span>派出所</span>
+            </div>
+            <div class="info-wrapper__item">
+              <label>群主人数：</label>
+              <span>派出所</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -14,7 +55,8 @@ export default {
     return {
       timer: null,
       v: `AiDvMap-${new Date().getTime()}`,
-      chart: null
+      chart: null,
+      isShowInfo: false
     }
   },
   directives: {
@@ -230,6 +272,9 @@ export default {
             ]
           }
           this.chart.setOption(option)
+          this.chart.on('click', e => {
+            this.isShowInfo = true
+          })
         }
       })
     },
@@ -261,11 +306,97 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AiDvMap {
+  .AiDvMap {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
-}
+
+    .info {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 111;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+
+      .info-mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: rgba($color: #000000, $alpha: 0);
+      }
+
+      .info-content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 11;
+        width: 378px;
+        height: 254px;
+        padding: 15px 22px 0;
+        background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/info-bg.png);
+        background-size: 100% 100%;
+        transform: translate(-50%, -50%);
+
+        .info-wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          margin-top: 40px;
+
+          .info-wrapper__item {
+            display: flex;
+            width: 50%;
+            margin-bottom: 20px;
+
+            label {
+              width: 70px;
+              margin-right: 20px;
+              color: #fff;
+              text-align: right;
+              font-size: 14px;
+              font-weight: 500;
+            }
+
+            span {
+              flex: 1;
+              font-size: 14px;
+              color: #FF8533;
+            }
+          }
+        }
+
+        img {
+          position: absolute;
+          top: 30px;
+          right: 18px;
+          z-index: 1;
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+          transition: all ease 300;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+
+        .info-title {
+          display: flex;
+          align-items: center;
+
+          h2 {
+            font-size: 16px;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
 </style>