From e449d5687b3ea339d2fd62da8cd93ed61ed7d2ce Mon Sep 17 00:00:00 2001
From: zhaotiantian <18710962446@163.com>
Date: Mon, 11 Dec 2023 18:28:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/item-d/item-d.vue              | 128 +++---
 src/components/item-d/pieCharts.ts            |   6 +-
 .../secondaryScreen/screen-left/PieCharts.vue |  58 +++
 .../screen-right/screenRightHooks.ts          |   4 +-
 .../secondaryScreen/screen-right/threeR.vue   |  13 +-
 .../secondaryScreen/screen-right/twoR.vue     |  90 ++---
 src/views/indexSon.vue                        | 378 ++++++++----------
 7 files changed, 349 insertions(+), 328 deletions(-)
 create mode 100644 src/components/secondaryScreen/screen-left/PieCharts.vue

diff --git a/src/components/item-d/item-d.vue b/src/components/item-d/item-d.vue
index 5bd8b1d..5fb19bb 100644
--- a/src/components/item-d/item-d.vue
+++ b/src/components/item-d/item-d.vue
@@ -1,76 +1,76 @@
 <template>
-    <div>
-        <public-title :title="props.title">
-            <template #right>
-                {{ props.tips }}
-            </template>
-        </public-title>
-        <div class="inner" ref="healthChart"></div>
-    </div>
+  <div>
+    <public-title :title="props.title">
+      <template #right>
+        {{ props.tips }}
+      </template>
+    </public-title>
+    <div class="inner" ref="healthChart"></div>
+  </div>
 </template>
 <script setup lang="ts">
-    import PublicTitle from '/@/components/publicTitle.vue';
-    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
-    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
-    import { screenPie } from '/@/components/item-d/pieCharts.ts';
-    import { onMounted, ref, unref, watch } from 'vue';
-    import * as echarts from 'echarts';
+import PublicTitle from '/@/components/publicTitle.vue';
+import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
+import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
+import {screenPie} from '/@/components/item-d/pieCharts.ts';
+import {onMounted, ref, unref, watch, defineProps} from 'vue';
+import * as echarts from 'echarts';
 
-    const props = defineProps({
-        title: {
-            type: String,
-            default: () => '',
-        },
-        data: {
-            type: Array,
-            default: () => [],
-        },
-        color: {
-            type: Array,
-            default: () => [],
-        },
-        tips: {
-            type: String,
-            default: () => '',
-        },
-    });
-    const healthChart = ref<HTMLElement>();
+const props = defineProps({
+  title: {
+    type: String,
+    default: () => '',
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  color: {
+    type: Array,
+    default: () => [],
+  },
+  tips: {
+    type: String,
+    default: () => '',
+  },
+});
+const healthChart = ref<HTMLElement>();
 
-    const { setSpin, spinning } = useSpin();
+const {setSpin, spinning} = useSpin();
 
-    onMounted(() => {
-        init();
-    });
+onMounted(() => {
+  init();
+});
 
-    watch(
-        () => props.data,
-        () => {
-            init();
-        }
-    );
-
-    const { healthData, getValue, setHealth } = useHealth();
-
-    async function init() {
-        // setHealth(props.data);
-        // const yData = unref(getValue);
-        // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-        initChart(props.data, 78, props.color);
+watch(
+    () => props.data,
+    () => {
+      init();
     }
+);
 
-    function initChart(chartData, total, color) {
-        let myChart = echarts.init(healthChart.value);
-        let options = screenPie(chartData, total, color);
-        myChart.setOption(options);
-        window.addEventListener('resize', () => {
-            myChart.resize();
-        });
-    }
+const {healthData, getValue, setHealth} = useHealth();
+
+async function init() {
+  // setHealth(props.data);
+  // const yData = unref(getValue);
+  // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+  initChart(props.data, 78, props.color);
+}
+
+function initChart(chartData, total, color) {
+  let myChart = echarts.init(healthChart.value);
+  let options = screenPie(chartData, total, color, '{d}%');
+  myChart.setOption(options);
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
+}
 </script>
 <style scoped lang="less">
-    .inner {
-        width: 100%;
-        margin: 0 auto;
-        height: calc(100% - 40px);
-    }
+.inner {
+  width: 100%;
+  margin: 0 auto;
+  height: calc(100% - 40px);
+}
 </style>
diff --git a/src/components/item-d/pieCharts.ts b/src/components/item-d/pieCharts.ts
index 35cc2e1..895109d 100644
--- a/src/components/item-d/pieCharts.ts
+++ b/src/components/item-d/pieCharts.ts
@@ -1,4 +1,4 @@
-export function screenPie(chartData, total, color) {
+export function screenPie(chartData, total, color, formatter) {
     return {
         title: {
             text: '总人数',
@@ -31,7 +31,7 @@ export function screenPie(chartData, total, color) {
             top: 'center',
             orient: 'vertical',
             icon: 'circle',
-            itemGap: 26,
+            itemGap: 16,
             textStyle: {
                 color: '#ffffff',
                 fontSize: 16,
@@ -46,7 +46,7 @@ export function screenPie(chartData, total, color) {
                 label: {
                     show: true,
                     position: 'inner',
-                    formatter: '{d}%',
+                    formatter: formatter,
                     color: '#ffffff',
                     fontSize: 14,
                 },
diff --git a/src/components/secondaryScreen/screen-left/PieCharts.vue b/src/components/secondaryScreen/screen-left/PieCharts.vue
new file mode 100644
index 0000000..dd1d60c
--- /dev/null
+++ b/src/components/secondaryScreen/screen-left/PieCharts.vue
@@ -0,0 +1,58 @@
+<template>
+  <template v-for="(item, index) in dataList" :key="`list${index}`">
+    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color"/>
+  </template>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import ItemD from '/@/components/item-d/item-d.vue';
+
+const dataList = ref([
+  {
+    title: '心率',
+    data: [
+      {name: '正常', value: 234},
+      {name: '警戒', value: 204},
+      {name: '危险', value: 34},
+    ],
+    color: ['#0098FA', '#FF6648', '#FB466C'],
+    tips: '正常范围60~100次/分',
+  },
+  {
+    title: '血氧',
+    data: [
+      {name: '正常', value: 234},
+      {name: '警戒', value: 204},
+      {name: '危险', value: 34},
+    ],
+    color: ['#0098FA', '#FF6648', '#FB466C'],
+    tips: '血氧饱和度范围95%~100%',
+  },
+  {
+    title: '压力',
+    data: [
+      {name: '正常', value: 234},
+      {name: '放松', value: 204},
+      {name: '中等', value: 34},
+      {name: '偏高', value: 78},
+    ],
+    color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
+    tips: '',
+  },
+  {
+    title: '体温',
+    data: [
+      {name: '37.2', value: 234},
+      {name: '37.2-38', value: 204},
+      {name: '>38', value: 34},
+    ],
+    color: ['#0098FA', '#0CD9B5', '#3B72AD'],
+    tips: '',
+  },
+]);
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/secondaryScreen/screen-right/screenRightHooks.ts b/src/components/secondaryScreen/screen-right/screenRightHooks.ts
index c0f5473..9133ba1 100644
--- a/src/components/secondaryScreen/screen-right/screenRightHooks.ts
+++ b/src/components/secondaryScreen/screen-right/screenRightHooks.ts
@@ -6,7 +6,7 @@ export function sleepCharts() {
             top: '15%',
             left: '8%',
             right: '3%',
-            bottom: '18%',
+            bottom: '20%',
         },
         legend: {
             data: ['清醒', '浅睡', '深睡'],
@@ -68,7 +68,7 @@ export function useHealth() {
     const healthData = ref([
         {
             name: '5000以下',
-            value: '0',
+            value: '23',
             type: '1',
             type_dictText: '恶性肿瘤',
         },
diff --git a/src/components/secondaryScreen/screen-right/threeR.vue b/src/components/secondaryScreen/screen-right/threeR.vue
index c519039..7436aab 100644
--- a/src/components/secondaryScreen/screen-right/threeR.vue
+++ b/src/components/secondaryScreen/screen-right/threeR.vue
@@ -9,10 +9,10 @@
           :pagination="tableInfo.pagination"
           :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
       >
-        <template #address="{text}">
+        <template #address="{text,record}">
           <div class="police-times">
-            <span class="police-text">{{ text }}</span>
-            <span class="police-icon"></span>
+            <span class="police-text">{{ record.address }}</span>
+            <span class="police-icon" @click="handlePoliceDetail(record)"></span>
           </div>
         </template>
       </a-table>
@@ -59,7 +59,6 @@ const tableInfo = ref({
     },
     {
       title: '住址',
-      dataIndex: 'address',
       key: 'address',
       align: 'center',
       slots: {customRender: 'address'}
@@ -68,9 +67,13 @@ const tableInfo = ref({
   pagination: {
     current: 1,
     pageSize: 2,
-    total: 2,
+    total: 10,
   },
 });
+
+function handlePoliceDetail(record) {
+  console.log(record)
+}
 </script>
 <style scoped lang="less">
 .inner-screen {
diff --git a/src/components/secondaryScreen/screen-right/twoR.vue b/src/components/secondaryScreen/screen-right/twoR.vue
index 6db8352..9c2b0ee 100644
--- a/src/components/secondaryScreen/screen-right/twoR.vue
+++ b/src/components/secondaryScreen/screen-right/twoR.vue
@@ -1,56 +1,56 @@
 <template>
-    <div>
-        <public-title title="步数" />
-        <div class="inner" ref="healthChart"></div>
-    </div>
+  <div>
+    <public-title title="步数"/>
+    <div class="inner" ref="healthChart"></div>
+  </div>
 </template>
 <script setup lang="ts">
-    import { ref, unref, onMounted } from 'vue';
-    import * as echarts from 'echarts';
-    import PublicTitle from '/@/components/publicTitle.vue';
-    import { getHealthDataList } from '/@/components/body-d-right/right.api';
-    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
-    import { useHealth } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
-    import { screenPie } from '/@/components/item-d/pieCharts.ts';
+import {ref, unref, onMounted} from 'vue';
+import * as echarts from 'echarts';
+import PublicTitle from '/@/components/publicTitle.vue';
+import {getHealthDataList} from '/@/components/body-d-right/right.api';
+import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
+import {useHealth} from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
+import {screenPie} from '/@/components/item-d/pieCharts.ts';
 
-    const { setSpin, spinning } = useSpin();
-    const healthChart = ref<HTMLElement>();
+const {setSpin, spinning} = useSpin();
+const healthChart = ref<HTMLElement>();
 
-    const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
-    onMounted(() => {
-        init();
-    });
-    const { healthData, getValue, setHealth } = useHealth();
+const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
+onMounted(() => {
+  init();
+});
+const {healthData, getValue, setHealth} = useHealth();
 
-    async function init() {
-        try {
-            const { code, result } = await getHealthDataList({});
-            setSpin(true);
-            if (code != 200) {
-                return;
-            }
-            setHealth(result);
-            const yData = unref(getValue);
-            let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-            initChart(unref(healthData), total);
-        } catch {
-            initChart(unref(healthData), 0);
-        }
+async function init() {
+  try {
+    const {code, result} = await getHealthDataList({});
+    setSpin(true);
+    if (code != 200) {
+      return;
     }
+    setHealth(result);
+    const yData = unref(getValue);
+    let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+    initChart(unref(healthData), '89');
+  } catch {
+    initChart(unref(healthData), 0);
+  }
+}
 
-    function initChart(chartData, total) {
-        let myChart = echarts.init(healthChart.value);
-        let options = screenPie(chartData, total, color.value);
-        myChart.setOption(options);
-        window.addEventListener('resize', () => {
-            myChart.resize();
-        });
-    }
+function initChart(chartData, total) {
+  let myChart = echarts.init(healthChart.value);
+  let options = screenPie(chartData, total, color.value, '{c}');
+  myChart.setOption(options);
+  window.addEventListener('resize', () => {
+    myChart.resize();
+  });
+}
 </script>
 <style scoped lang="less">
-    .inner {
-        width: 100%;
-        margin: 0 auto;
-        height: calc(100% - 40px);
-    }
+.inner {
+  width: 100%;
+  margin: 0 auto;
+  height: calc(100% - 40px);
+}
 </style>
diff --git a/src/views/indexSon.vue b/src/views/indexSon.vue
index 368fc9b..364f20e 100644
--- a/src/views/indexSon.vue
+++ b/src/views/indexSon.vue
@@ -1,234 +1,194 @@
 <template>
-    <div class="outer">
-        <div class="title-d">
-            <div class="title-d-left">
+  <div class="outer">
+    <div class="title-d">
+      <div class="title-d-left">
                 <span style="cursor: pointer" @click="clickBack">
                     <a-space>
-                        <rollback-outlined />
+                        <rollback-outlined/>
                     </a-space>
                     返回
                 </span>
-            </div>
-            <div class="title-d-middle"> 应急就医服务中心</div>
-            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
-        </div>
-        <div class="body-d">
-            <div class="body-d-left">
-                <template v-for="(item, index) in dataList" :key="`list${index}`">
-                    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
-                </template>
-            </div>
-            <div class="body-d-middle">
-                <SecondMap>
-                    <template #rightForm>
-                        <a-select
-                            placeholder="选择单位"
-                            v-model:value="orgCode"
-                            class="type-select"
-                            :options="option"
-                            :fieldNames="fieldNames"
-                        ></a-select>
-                        <a-select placeholder="选择时间范围" v-model:value="type" class="type-select" :options="timeRangeOption"></a-select>
-                    </template>
-                </SecondMap>
-            </div>
-            <div class="body-d-right">
-                <one-r />
-                <two-r />
-                <three-r />
-            </div>
-        </div>
-        <div class="bottom-d"></div>
+      </div>
+      <div class="title-d-middle"> 应急就医服务中心</div>
+      <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
     </div>
+    <div class="body-d">
+      <div class="body-d-left">
+        <PieCharts/>
+      </div>
+      <div class="body-d-middle">
+        <SecondMap>
+          <template #rightForm>
+            <a-select
+                placeholder="选择单位"
+                v-model:value="orgCode"
+                class="type-select"
+                :options="option"
+                :fieldNames="fieldNames"
+            ></a-select>
+            <a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
+                      :options="timeRangeOption"></a-select>
+          </template>
+        </SecondMap>
+      </div>
+      <div class="body-d-right">
+        <one-r/>
+        <two-r/>
+        <three-r/>
+      </div>
+    </div>
+    <div class="bottom-d"></div>
+  </div>
 </template>
 <script setup lang="ts">
-    import { RollbackOutlined } from '@ant-design/icons-vue';
-    import { ref } from 'vue';
-    import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
-    import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
-    import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
-    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
-    import router from '/@/router';
-    import ItemD from '/@/components/item-d/item-d.vue';
-    import { useDepart, useTimeType } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
-    import { useTopTime } from '/@/utils/utils.ts';
+import {RollbackOutlined} from '@ant-design/icons-vue';
+import {ref} from 'vue';
+import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
+import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
+import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
+import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
+import PieCharts from '/@/components/secondaryScreen/screen-left/PieCharts.vue'
+import router from '/@/router';
+import ItemD from '/@/components/item-d/item-d.vue';
+import {useDepart, useTimeType} from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+import {useTopTime} from '/@/utils/utils.ts';
 
-    const dayTimeT = ref();
-    const dataList = ref([
-        {
-            title: '心率',
-            data: [
-                { name: '正常', value: 234 },
-                { name: '警戒', value: 204 },
-                { name: '危险', value: 34 },
-            ],
-            color: ['#0098FA', '#FF6648', '#FB466C'],
-            tips: '正常范围60~100次/分',
-        },
-        {
-            title: '血氧',
-            data: [
-                { name: '正常', value: 234 },
-                { name: '警戒', value: 204 },
-                { name: '危险', value: 34 },
-            ],
-            color: ['#0098FA', '#FF6648', '#FB466C'],
-            tips: '血氧饱和度范围95%~100%',
-        },
-        {
-            title: '压力',
-            data: [
-                { name: '正常', value: 234 },
-                { name: '放松', value: 204 },
-                { name: '中等', value: 34 },
-                { name: '偏高', value: 78 },
-            ],
-            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
-            tips: '',
-        },
-        {
-            title: '体温',
-            data: [
-                { name: '37.2', value: 234 },
-                { name: '37.2-38', value: 204 },
-                { name: '>38', value: 34 },
-            ],
-            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
-            tips: '',
-        },
-    ]);
+const dayTimeT = ref();
 
-    function init() {
-        getTime();
-        setInterval(() => {
-            getTime();
-        }, 1000);
-    }
 
-    init();
+function init() {
+  getTime();
+  setInterval(() => {
+    getTime();
+  }, 1000);
+}
 
-    function getTime() {
-        const { timeRight } = useTopTime();
-        dayTimeT.value = timeRight;
-    }
+init();
 
-    function clickBack() {
-        router.go(-1);
-    }
+function getTime() {
+  const {timeRight} = useTopTime();
+  dayTimeT.value = timeRight;
+}
 
-    const { orgCode, option, fieldNames } = useDepart({});
-    const { type, timeRangeOption } = useTimeType('week');
+function clickBack() {
+  router.go(-1);
+}
+
+const {orgCode, option, fieldNames} = useDepart({});
+const {type, timeRangeOption} = useTimeType('week');
 </script>
 <style lang="less" scoped>
-    .outer {
-        height: 100%;
-        box-sizing: border-box;
-        background: url('../assets/images/bg.png') no-repeat;
-        background-size: 100% 100%;
+.outer {
+  height: 100%;
+  box-sizing: border-box;
+  background: url('../assets/images/bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.title-d {
+  height: 80px;
+  line-height: 80px;
+  display: flex;
+  padding-bottom: 9px;
+  background: url('../assets/images/top-title.png') no-repeat;
+  background-size: 100% 100%;
+
+  .title-d-left,
+  .title-d-middle,
+  .title-d-right {
+    font-size: 27px;
+    color: #ffffff;
+    line-height: 60px;
+    text-align: center;
+  }
+
+  .title-d-left {
+    text-align: left !important;
+    padding-left: 80px;
+  }
+
+  > :nth-child(1) {
+    width: 29%;
+  }
+
+  > :nth-child(2) {
+    width: 42%;
+    font-size: 40px;
+    font-weight: bold;
+  }
+
+  > :nth-child(3) {
+    width: 29%;
+  }
+}
+
+.body-d {
+  display: flex;
+  height: calc(100% - 120px);
+  //padding-top: 10px;
+
+  > :nth-child(1) {
+    width: 25%;
+  }
+
+  > :nth-child(2) {
+    width: 50%;
+  }
+
+  > :nth-child(3) {
+    width: 25%;
+  }
+
+  .body-d-left,
+  .body-d-right {
+    text-align: center;
+  }
+
+  .body-d-right {
+    > :nth-child(1) {
+      width: 100%;
+      height: calc(100% / 4);
+      max-height: calc(100% / 4);
+      padding: 10px;
     }
 
-    .title-d {
-        height: 80px;
-        line-height: 80px;
-        display: flex;
-        padding-bottom: 9px;
-        background: url('../assets/images/top-title.png') no-repeat;
-        background-size: 100% 100%;
-
-        .title-d-left,
-        .title-d-middle,
-        .title-d-right {
-            font-size: 27px;
-            color: #ffffff;
-            line-height: 60px;
-            text-align: center;
-        }
-
-        .title-d-left {
-            text-align: left !important;
-            padding-left: 80px;
-        }
-
-        > :nth-child(1) {
-            width: 29%;
-        }
-
-        > :nth-child(2) {
-            width: 42%;
-            font-size: 40px;
-            font-weight: bold;
-        }
-
-        > :nth-child(3) {
-            width: 29%;
-        }
+    > :nth-child(2) {
+      width: 100%;
+      height: calc(100% / 4);
+      max-height: calc(100% / 4);
+      padding: 10px;
     }
 
-    .body-d {
-        display: flex;
-        height: calc(100% - 120px);
-        //padding-top: 10px;
-
-        > :nth-child(1) {
-            width: 25%;
-        }
-
-        > :nth-child(2) {
-            width: 50%;
-        }
-
-        > :nth-child(3) {
-            width: 25%;
-        }
-
-        .body-d-left,
-        .body-d-right {
-            text-align: center;
-        }
-
-        .body-d-right {
-            > :nth-child(1) {
-                width: 100%;
-                height: calc(100% / 4);
-                padding: 10px;
-            }
-
-            > :nth-child(2) {
-                width: 100%;
-                height: calc(100% / 4);
-                padding: 10px;
-            }
-
-            > :nth-child(3) {
-                width: 100%;
-                height: calc(100% / 2);
-                padding: 10px;
-            }
-        }
-
-        .body-d-left {
-            > :nth-child(n) {
-                width: 100%;
-                height: calc(100% / 4);
-                padding: 10px;
-            }
-        }
-
-        .body-d-middle {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .type-select {
-            width: 120px;
-            color: #008cff;
-            margin-right: 10px;
-        }
+    > :nth-child(3) {
+      width: 100%;
+      height: calc(100% / 2);
+      padding: 10px;
     }
+  }
 
-    .bottom-d {
-        height: 40px;
-        background: url('../assets/images/bottom-b.png') no-repeat;
-        background-size: 100% 100%;
+  .body-d-left {
+    > :nth-child(n) {
+      width: 100%;
+      height: calc(100% / 4);
+      padding: 10px;
     }
+  }
+
+  .body-d-middle {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .type-select {
+    width: 120px;
+    color: #008cff;
+    margin-right: 10px;
+  }
+}
+
+.bottom-d {
+  height: 40px;
+  background: url('../assets/images/bottom-b.png') no-repeat;
+  background-size: 100% 100%;
+}
 </style>
\ No newline at end of file