diff --git a/README.md b/README.md
index d0a13d4..eb806e1 100644
--- a/README.md
+++ b/README.md
@@ -914,4 +914,10 @@ update
 ## v1.0.117
 `2024.3.21`
 update
-- ‘抑郁’文字 通过页面传过来的参数 改成‘焦虑’，否则不变
\ No newline at end of file
+- ‘抑郁’文字 通过页面传过来的参数 改成‘焦虑’，否则不变
+
+
+## v1.0.118
+`2024.3.25`
+fix
+- 修复 心理监测详情中间组件颜色与接口返回的等级颜色不一致的问题
\ No newline at end of file
diff --git a/src/assets/img/card_bind.mp4 b/src/assets/img/card_bind.mp4
new file mode 100644
index 0000000..f1827e0
Binary files /dev/null and b/src/assets/img/card_bind.mp4 differ
diff --git a/src/config/models.js b/src/config/models.js
index cf89513..9237bce 100644
--- a/src/config/models.js
+++ b/src/config/models.js
@@ -8,7 +8,7 @@
 import store from "@/store";
 // 情绪模型
 const appTypeList = ['1'];
-export const VERSION_MODEL = '1.0.117F'; //版本号
+export const VERSION_MODEL = '1.0.118F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',
diff --git a/src/router/index.js b/src/router/index.js
index 39bf12c..40162f0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -76,6 +76,7 @@ const routes = [
     { path: '/deviceSetting', name: 'deviceSetting', component: resolve => require(['@/views/gps-card-frontend/device-setting'], resolve) },
     // c1（4g管理后台）涉水区域白名单
     { path: '/drownWhiteList', name: 'drownWhiteList', component: resolve => require(['@/views/gps-card-frontend/drown-white-list'], resolve) },
+    { path: '/smartCard', name: 'smartCard', component: resolve => require(['@/views/smart-card/index'], resolve) },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/health/psychological-main/index.vue b/src/views/health/psychological-main/index.vue
index 2229cd4..c644abe 100644
--- a/src/views/health/psychological-main/index.vue
+++ b/src/views/health/psychological-main/index.vue
@@ -13,7 +13,7 @@
     <div class="main">
       <div class="list">
         <div v-for="(item, index) in healhtList" :key="index" :class="['item', item.class]" @click="onClick(item)">
-          <p class="health-value" :style="{ color: calcColor(item.value) }">
+          <p class="health-value" :style="{ color: calcResultColor(item.level) }">
             {{ item.value || "--" }}
           </p>
           <p class="health-name">
@@ -236,6 +236,30 @@ export default {
       }
       return color;
     },
+    // 计算结果采用哪种颜色
+    calcResultColor(value, isCallBackClass) {
+      let color = "";
+      let className = "";
+      switch (Number(value)) {
+        case 0:
+          color = "#62BD48";
+          className = "none";
+          break;
+        case 1:
+          color = "#ffde00";
+          className = "mild";
+          break;
+        case 2:
+          color = "#ff8a00";
+          className = "moderate";
+          break;
+        case 3:
+          color = "#d70d0d";
+          className = "severe";
+          break;
+      }
+      return isCallBackClass ? className : color;
+    },
   },
 };
 </script>
diff --git a/src/views/health/psychological/index.vue b/src/views/health/psychological/index.vue
index a7474db..99e232f 100644
--- a/src/views/health/psychological/index.vue
+++ b/src/views/health/psychological/index.vue
@@ -102,7 +102,7 @@
               </div>
 
               <div class="middle">
-                <span :style="{ color: calcColor(item.value) }">{{
+                <span :style="{ color: calcResultColor(item.level) }">{{
       item.value || "--"
     }}</span>
               </div>
@@ -926,6 +926,7 @@ export default {
                   ? this.$dayjs(data.MaxDesc).format("HH:mm")
                   : this.$dayjs(data.MaxDesc).format("MM/DD HH:mm")
                 : "",
+              level: data.MaxLevel
             };
             let Min = {
               label: "最小值",
@@ -935,6 +936,7 @@ export default {
                   ? this.$dayjs(data.MinDesc).format("HH:mm")
                   : this.$dayjs(data.MinDesc).format("MM/DD HH:mm")
                 : "",
+              level: data.MinLevel
             };
             let Avg = {
               label: "平均值",
@@ -944,6 +946,7 @@ export default {
                   ? this.$dayjs(data.AvgDesc).format("HH:mm")
                   : this.$dayjs(data.AvgDesc).format("MM/DD HH:mm")
                 : "",
+              level: data.AvgLevel
             };
             let Current = {
               label: "最近值",
@@ -953,6 +956,7 @@ export default {
                   ? this.$dayjs(data.CurrentDesc).format("HH:mm")
                   : this.$dayjs(data.CurrentDesc).format("MM/DD HH:mm")
                 : "",
+              level: data.CurrentLevel
             };
             this.statisticsList.push(Max);
             this.statisticsList.push(Min);
diff --git a/src/views/health/psychological/report/index.vue b/src/views/health/psychological/report/index.vue
index b851f4c..2e193eb 100644
--- a/src/views/health/psychological/report/index.vue
+++ b/src/views/health/psychological/report/index.vue
@@ -90,7 +90,7 @@
             </div>
 
             <div class="middle">
-              <span :style="{ color: calcColor(item.value) }">{{
+              <span :style="{ color: calcResultColor(item.level) }">{{
       item.value || "--"
     }}</span>
             </div>
@@ -681,6 +681,7 @@ export default {
               return item.Key;
             })
             : [];
+          console.log("chartData", chartData);
           if (data) {
             this.monitoringCount = data.Total;
             this.pieRightList = [];
@@ -750,6 +751,7 @@ export default {
                 ? this.$dayjs(data.MaxDesc).format("HH:mm")
                 : this.$dayjs(data.MaxDesc).format("MM/DD HH:mm")
               : "",
+            level: data.MaxLevel
           };
           let Min = {
             label: "最小值",
@@ -759,6 +761,7 @@ export default {
                 ? this.$dayjs(data.MinDesc).format("HH:mm")
                 : this.$dayjs(data.MinDesc).format("MM/DD HH:mm")
               : "",
+            level: data.MinLevel
           };
           let Avg = {
             label: "平均值",
@@ -768,6 +771,7 @@ export default {
                 ? this.$dayjs(data.AvgDesc).format("HH:mm")
                 : this.$dayjs(data.AvgDesc).format("MM/DD HH:mm")
               : "",
+            level: data.AvgLevel
           };
           this.statisticsList.push(Max);
           this.statisticsList.push(Min);
@@ -805,7 +809,7 @@ export default {
           this.emotionList.push(ModerateDay);
           this.emotionList.push(SevereDay);
           // 图表数据
-          this.emotionData = chartData.map((item) => {
+          this.emotionData = chartData.map(item => {
             return {
               value: item.Value,
               itemStyle: {
@@ -813,6 +817,7 @@ export default {
               },
             };
           });
+          console.log("emotionData", this.emotionData);
           this.weekAndMonData = chartData.map((item, index) => {
             return {
               value: [index, item.MinValue, item.MaxValue],
@@ -1001,20 +1006,20 @@ export default {
     calcResultColor(value, isCallBackClass) {
       let color = "";
       let className = "";
-      switch (value) {
-        case ("0", 0):
+      switch (Number(value)) {
+        case 0:
           color = "#62BD48";
           className = "none";
           break;
-        case ("1", 1):
+        case 1:
           color = "#ffde00";
           className = "mild";
           break;
-        case ("2", 2):
+        case 2:
           color = "#ff8a00";
           className = "moderate";
           break;
-        case ("3", 3):
+        case 3:
           color = "#d70d0d";
           className = "severe";
           break;
diff --git a/src/views/smart-card/index.vue b/src/views/smart-card/index.vue
new file mode 100644
index 0000000..1fd869c
--- /dev/null
+++ b/src/views/smart-card/index.vue
@@ -0,0 +1,136 @@
+<!--  -->
+<template>
+    <div class="video-containe">
+        <video ref="myVideo" playsinline muted loop @loadedmetadata="handleMetadata">
+            <source src="../../assets/img/card_bind.mp4" type="video/mp4">
+        </video>
+        <!-- 播放/暂停按钮 -->
+        <div class="btn-con">
+            <van-button @click="togglePlay" :color="btnColor">
+                {{ btnText }}
+            </van-button>
+            <van-button @click="goToWebApp" color="#ee3399">
+                智能名片
+            </van-button>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isPlaying: null
+        }
+    },
+    computed: {
+        btnText() {
+            let text = '讲解模式';
+            if (this.isPlaying == null) {
+                return text;
+            } else if (this.isPlaying == false) {
+                text = '继续讲解'
+            } else {
+                text = '暂停讲解'
+            }
+            return text
+        },
+        btnColor() {
+            let color = '';
+            if (this.isPlaying == null) {
+                // 默认
+                color = '#ee3399'
+            } else if (this.isPlaying == false) {
+                color = 'green'
+            } else {
+                color = 'orange'
+            }
+            return color
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+        window.document.title = '人工智能月子中心介绍';
+    },
+    methods: {
+        handleMetadata(event) {
+            const videoElement = event.target;
+            this.aspectRatio = videoElement.videoWidth / videoElement.videoHeight;
+        },
+        togglePlay() {
+            const videoPlayer = this.$refs.myVideo;
+
+            if (videoPlayer.paused) {
+                videoPlayer.play(); // 开始播放
+                this.isPlaying = true;
+            } else {
+                videoPlayer.pause(); // 暂停播放
+                this.isPlaying = false;
+            }
+        },
+        goToWebApp() {
+            let jumpUrl = 'https://hao-yun666-5g407x0f9e513af8-1325200810.tcloudbaseapp.com/jump-mp.html?sign=02240d77ff8df94a035322d647ac7196&t=1711071109';
+            /* window.location.href = jumpUrl; */
+            // replace,表明新窗口加载的内容是否替换浏览历史中的当前条目
+            window.open(jumpUrl, 'replace = true');
+        }
+    },
+}
+</script>
+<style scoped lang="scss">
+.video-containe {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    /* 动态计算padding-bottom保持宽高比 */
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+
+    video {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+
+        /* 或者 object-fit: cover 根据需求选择 */
+    }
+
+    .btn-con {
+        position: absolute;
+        bottom: 3%;
+
+        .van-button {
+            margin: 0 5px;
+        }
+    }
+
+
+    /* 当视口宽度小于等于600px时应用以下样式 */
+    @media screen and (max-width: 600px) {
+        .btn-con {
+
+            left: 20%;
+
+        }
+    }
+
+    /* 当视口宽度大于600px时应用另一组样式 */
+    @media screen and (min-width: 601px) {
+        .btn-con {
+
+
+            left: 45%;
+        }
+    }
+
+}
+
+/* @import url(); 引入css类 */
+</style>
\ No newline at end of file