主诉分类

src/assets/ts/antd.ts

@@ -5,7 +5,8 @@ import {
     Button,
     Radio,
     Modal,
-    Table
+    Table,
+    Select
 } from 'ant-design-vue';
 
 export default function registerGlobComp(app: App) {
@@ -15,4 +16,5 @@ export default function registerGlobComp(app: App) {
         .use(Radio)
         .use(Modal)
         .use(Table)
+        .use(Select)
 }

src/components/body-d-left/twoL.vue

@@ -3,10 +3,17 @@
     <public-title title="主诉分类"/>
     <div class="inner">
       <div class="title">
-            <div class="type-time">
-              <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span>
+        <div class="type-check">
+          <span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index"
+                @click="handleSelect(index)">{{ item.name }}</span>
+        </div>
+        <div class="type-all">
+          <a-select v-model:value="typesSelect" class="type-select" >
+            <a-select-option value="全部数据">全部数据</a-select-option>
+            <a-select-option value="jack">Jack</a-select-option>
+            <a-select-option value="lucy">Lucy</a-select-option>
+          </a-select>
         </div>
-            <div class="type-all">全部数据</div>
       </div>
       <div class="line-chart" ref="chiefChart"></div>
     </div>
@@ -17,6 +24,7 @@ import { ref,onMounted } from 'vue';
 import PublicTitle from "../publicTitle.vue";
 import * as echarts from 'echarts';
 
+const typesSelect = ref('全部数据')
 const typeTime = ref([
   {
     name: '男',
@@ -33,6 +41,7 @@ onMounted(()=>{
   let ydata = [120, 200, 150, 80, 70, 110, 130];
   initChart(xdata, ydata)
 })
+
 function initChart(xData, ydata) {
   let myChart = echarts.init(chiefChart.value)
   let options = {
@@ -86,15 +95,63 @@ function initChart(xData,ydata){
     myChart.resize();
   });
 }
+
+function handleSelect(index) {
+  selectIndex.value = index
+}
 </script>
 <style scoped lang="less">
 .inner {
   height: calc(100% - 40px);
   .title {
+    width: 100%;
     display: flex;
+    align-items: center;
     justify-content: right;
-      .type-all{
+    padding: 2% 0;
+
+    .type-check {
       color: #ffffff;
+      width: 15%;
+      display: flex;
+      justify-content: space-around;
+
+      span {
+        padding: 0 2%;
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      .select {
+        color: #45A2FF;
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          display: block;
+          width: 100%;
+          left: 0;
+          bottom: -12px;
+          height: 6px;
+          background: url("../../assets/images/light.png") no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .unSelect {
+        color: #A3A4A4;
+      }
+    }
+
+    .type-all {
+      width: 18%;
+      color: #ffffff;
+
+      .type-select {
+        width: 94%;
+        color: #008CFF;
+      }
     }
   }
   .line-chart {
@@ -104,3 +161,40 @@ function initChart(xData,ydata){
   }
 }
 </style>
+<style lang="less">
+.ant-select-dropdown{
+  background-color: #00152b!important;
+  border-right: 1px solid #1b7ef2;
+  border-left: 1px solid #1b7ef2;
+  border-bottom: 1px solid #1b7ef2;
+}
+.ant-select-item{
+  color: #1b7ef2!important;
+}
+//框背景色
+.ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  color: #1b7ef2!important;
+  background-color: transparent!important;
+  border: 1px solid #1b7ef2 !important;
+}
+.ant-select-item-option-selected{
+  color: #ffffff!important;
+}
+// 选中字体颜色
+.ant-select-selection-item{
+  color: #1b7ef2!important;
+}
+.ant-select-item-option-active{
+  background-color:transparent!important;
+}
+.ant-select-item-option-active:hover{
+  background-color: #002e64!important;
+}
+// 箭头颜色
+.ant-select-arrow {
+  color: #1b7ef2 !important;
+}
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
+  background-color:#002e64!important;
+}
+</style>

src/components/dialog/Dialog.vue

@@ -1,5 +1,6 @@
 <template>
   <a-modal
+      class="dialog"
       v-model:visible="props.openVis"
       :title="props.title"
       :width="props.width"
@@ -31,6 +32,7 @@
 </script>
 
 <style lang="less">
+.dialog{
   .ant-modal-title{
     position: relative;
     display: flex;
@@ -61,5 +63,5 @@
   .ant-modal-wrap{
     background-color: rgba(0,0,0,0.6);
   }
-
+}
 </style>