修改

.prettierrc.json

@@ -3,6 +3,6 @@
   "semi": false,
   "tabWidth": 2,
   "singleQuote": true,
-  "printWidth": 100,
+  "printWidth": 400,
   "trailingComma": "none"
 }

package-lock.json

@@ -8,6 +8,7 @@
       "name": "web",
       "version": "0.0.0",
       "dependencies": {
+        "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
         "@element-plus/icons-vue": "^2.3.1",
         "@vueuse/core": "^10.7.2",
         "@vueuse/integrations": "^10.9.0",
@@ -133,6 +134,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/@dataview/datav-vue3": {
+      "version": "0.0.0-test.1672506674342",
+      "resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
+      "integrity": "sha512-d0oT/msAi592CTvWmQl0umkLpHgMwtTN2+peyo0L2GHNG7b4cKeO9meEF5o28DgFzRwOLeNQW73vKCF4JC+ihw==",
+      "dependencies": {
+        "@jiaminghi/color": "^0.1.1",
+        "classnames": "^2.3.2",
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
@@ -805,6 +819,59 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
+    "node_modules/@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "node_modules/@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "node_modules/@jiaminghi/color": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
+      "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "node_modules/@jiaminghi/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
+    "node_modules/@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -2086,6 +2153,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
@@ -7428,6 +7500,16 @@
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
       "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
     },
+    "@dataview/datav-vue3": {
+      "version": "0.0.0-test.1672506674342",
+      "resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
+      "integrity": "sha512-d0oT/msAi592CTvWmQl0umkLpHgMwtTN2+peyo0L2GHNG7b4cKeO9meEF5o28DgFzRwOLeNQW73vKCF4JC+ihw==",
+      "requires": {
+        "@jiaminghi/color": "^0.1.1",
+        "classnames": "^2.3.2",
+        "lodash-es": "^4.17.21"
+      }
+    },
     "@element-plus/icons-vue": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
@@ -7815,6 +7897,59 @@
       "resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-9.10.2.tgz",
       "integrity": "sha512-ttHCAJkRy7R5W2S9RVnN9KYQYPIpV2+GiS79T4EE37nrPyH6/1SrOh3bmdCRC1T3ocL8qCDx7x2lBJ0xaITU7Q=="
     },
+    "@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "@jiaminghi/color": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
+      "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
+    "@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -8683,6 +8818,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
@@ -12556,4 +12696,4 @@
       }
     }
   }
-}
+}

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^10.7.2",
     "@vueuse/integrations": "^10.9.0",
@@ -50,4 +51,4 @@
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-svg-icons": "^2.0.1"
   }
-}
+}

public/images/brain/tit-bg.svg

@@ -0,0 +1 @@
+<svg width="430" height="40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientUnits="userSpaceOnUse" x1="551" y1="100" x2="121" y2="100" id="a"><stop stop-color="#18233f" offset="0"/><stop stop-color="#1f5791" offset=".49"/><stop stop-color="#1a2640" offset="1"/></linearGradient></defs><path d="M122 81h428v39H122V81Z" fill="url(#a)" transform="translate(-121 -80)"/></svg>

public/images/brain/titleBg.svg

@@ -0,0 +1 @@
+<svg width="1484" height="74" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientUnits="userSpaceOnUse" x1="742" y1="0" x2="742" y2="74" id="a"><stop stop-color="#0c6698" offset="0"/><stop stop-color="#0f3c5c" offset=".36"/><stop stop-color="#0e2d48" offset=".99"/><stop stop-color="#0e2d48" offset="1"/></linearGradient></defs><path d="M1484 .75H.25l396.25 15 75 53.75 542.5 3.75 82.5-57.5 387.5-15Z" fill="url(#a)"/></svg>

src/components/custom/custom-layout.vue

@@ -25,47 +25,37 @@
           <div
             class="text"
             v-for="(item, index) in data"
-            :key="index"
             @click="selectMenu(item.route)"
             :style="{
               backgroundColor: item.hover ? '#1073ff' : 'transparent',
               color: item.hover ? '#ffffff' : ''
             }"
+            :key="index"
             @mouseover="handleMouseOver(index)"
-            @mouseleave="handleMouseLeave(index)"
+            @mouseout="handleMousOut(index)"
           >
             <span>{{ item.title }}</span>
           </div>
         </el-col>
-        <div v-if="info && info.children">
+        <el-col :span="24" class="info">
           <div class="info_1" v-if="info.key == '3'">
-            <el-col :span="12" class="list_1" v-for="(item, index) in info.children" :key="index">
-              <div class="title">{{ item.title }}</div>
+            <el-col :span="12" class="list_1" v-for="(agg, index) in info.children" :key="index">
+              <div class="title">{{ agg.title }}</div>
               <div class="list_1_1">
-                <div
-                  v-for="(tag, indexs) in item.children"
-                  :key="indexs"
-                  class="title1"
-                  @click="selectMenu(tag.route)"
-                >
+                <div v-for="(tag, indexs) in agg.children" :key="indexs" class="title1" @click="selectMenu(tag.route)">
                   {{ tag.title }}
                 </div>
               </div>
             </el-col>
           </div>
-          <div class="info_2" v-else>
+          <div class="info_2" v-if="info.key == '10'">
             <el-col :span="24" class="list_2">
-              <div
-                v-for="(item, index) in info.children"
-                :key="index"
-                class="title1"
-                @click="selectMenu(item.route)"
-              >
-                {{ item.title }}
+              <div v-for="(tag, indexs) in info.children" :key="indexs" class="title1" @click="selectMenu(tag.route)">
+                {{ tag.title }}
               </div>
             </el-col>
           </div>
-        </div>
+        </el-col>
       </el-col>
     </div>
     <div class="main">
@@ -142,9 +132,8 @@ const handleMouseOver = (index) => {
   data.value[index].hover = true
   info.value = data.value[index]
 }
-const handleMouseLeave = (index) => {
+const handleMousOut = (index) => {
   data.value[index].hover = false
-  // info.value = {}
   const arr = data.value.every((i) => i.hover === false)
   if (arr) {
     for (const val of data.value) {
@@ -219,31 +208,58 @@ const handleMouseLeave = (index) => {
         }
       }
 
-      .info_1 {
-        position: absolute;
-        left: 0;
-        top: 128px;
-        display: flex;
-        padding: 10px 0;
-        background: $global-color-107;
-        width: 700px;
-        .list_1 {
-          margin: 0 10px 0 0;
-          .title {
-            margin: 5px 0;
-            font-size: $global-font-size-20;
-            font-weight: 600;
-            text-align: center;
-            color: #fff;
-            cursor: pointer; /* 改变鼠标样式为手形 */
+      .info {
+        display: none;
+        .info_1 {
+          position: absolute;
+          left: 0;
+          top: 128px;
+          display: flex;
+          padding: 10px 0;
+          background: $global-color-107;
+          width: 700px;
+          .list_1 {
+            margin: 0 10px 0 0;
+            .title {
+              margin: 5px 0;
+              font-size: $global-font-size-20;
+              font-weight: 600;
+              text-align: center;
+              color: #fff;
+              cursor: pointer; /* 改变鼠标样式为手形 */
+            }
+            .list_1_1 {
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+              margin: 5px 0;
+              .title1 {
+                width: 120px;
+                margin: 5px;
+                padding: 5px;
+                text-align: center;
+                color: #ffffff;
+                font-size: $global-font-size-18;
+                cursor: pointer; /* 改变鼠标样式为手形 */
+              }
+            }
           }
-          .list_1_1 {
+        }
+        .info_2 {
+          position: absolute;
+          left: 68.1%;
+          top: 128px;
+          display: flex;
+          padding: 10px 0;
+          background: $global-color-107;
+          width: 145px;
+          .list_2 {
             display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
+            flex-direction: column;
+            align-items: center;
             margin: 5px 0;
             .title1 {
-              width: 120px;
+              width: 110px;
               margin: 5px;
               padding: 5px;
               text-align: center;
@@ -254,29 +270,12 @@ const handleMouseLeave = (index) => {
           }
         }
       }
-      .info_2 {
-        position: absolute;
-        left: 68%;
-        top: 128px;
-        display: flex;
-        padding: 10px 0;
-        background: $global-color-107;
-        .list_2 {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          width: 145px;
-          margin: 5px 0;
-          .title1 {
-            width: 110px;
-            margin: 5px;
-            padding: 5px;
-            text-align: center;
-            color: #ffffff;
-            font-size: $global-font-size-18;
-            cursor: pointer; /* 改变鼠标样式为手形 */
-          }
-        }
+    }
+  }
+  .header:hover {
+    .header_2 {
+      .info {
+        display: block !important;
       }
     }
   }
@@ -294,12 +293,20 @@ const handleMouseLeave = (index) => {
       justify-content: space-between;
       border-bottom: 1px solid $global-color-bbb;
       .left {
+        .image {
+          width: 393px;
+          height: 70px;
+        }
         .title {
           margin: 5px 0 0 0;
         }
       }
       .right {
         text-align: center;
+        .image {
+          width: 130px;
+          height: 130px;
+        }
         .title {
           margin: 5px 0 0 0;
         }

src/components/dataV/myMain.vue

@@ -45,7 +45,7 @@ export default {
     },
     setAppScale() {
       const { allWidth, allHeight, dom } = this
-      const currentWidth = window.outerWidth
+      const currentWidth = window.innerWidth
       const currentHeight = window.innerHeight
       // dom.style.transform = `scale(${currentWidth / allWidth})`
       dom.style.transform = `scaleY(${currentHeight / allHeight}) scaleX(${currentWidth / allWidth})`

src/router/index.js

@@ -186,6 +186,41 @@ const router = createRouter({
       meta: { title: '产学研用协同创新数字化平台-帮助中心' },
       component: () => import('@/views/help/index.vue')
     },
+    {
+      path: '/brain',
+      meta: { title: '产学研用协同创新数字化平台-产业大脑' },
+      component: () => import('@/views/brain/index.vue')
+    },
+    {
+      path: '/brain/one',
+      meta: { title: '产学研用协同创新数字化平台-产业大脑' },
+      component: () => import('@/views/brain/one.vue')
+    },
+    {
+      path: '/brain/two',
+      meta: { title: '产学研用协同创新数字化平台-产业大脑' },
+      component: () => import('@/views/brain/two.vue')
+    },
+    {
+      path: '/brain/thr',
+      meta: { title: '产学研用协同创新数字化平台-产业大脑' },
+      component: () => import('@/views/brain/thr.vue')
+    },
+    {
+      path: '/brain/four',
+      meta: { title: '产学研用协同创新数字化平台-产业大脑' },
+      component: () => import('@/views/brain/four.vue')
+    },
+    {
+      path: '/brain/five',
+      meta: { title: '产学研用协同创新数字化平台-产业大脑' },
+      component: () => import('@/views/brain/five.vue')
+    },
+    {
+      path: '/brain/six',
+      meta: { title: '产学研用协同创新数字化平台-产业大脑' },
+      component: () => import('@/views/brain/six.vue')
+    },
     {
       path: '/loading',
       name: 'loading',

src/styles/variables.scss

@@ -39,9 +39,9 @@ $global-color-595: #595959;
   font-size: 18px !important; /* 设置标签字体大小 */
 }
 
-.el-input__inner {
-  font-size: 16px !important; /* 设置输入框字体大小 */
-}
+// .el-input__inner {
+//   font-size: 16px !important; /* 设置输入框字体大小 */
+// }
 
 /* custom-element-plus.css */
 .el-tabs__item {

src/views/brain/five.vue

@@ -0,0 +1,244 @@
+<template>
+  <myMain>
+    <div class="brainOne">
+      <div class="menu_1" v-if="is_show">
+        <div class="left">
+          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="right" @click="is_show = false">
+          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
+        </div>
+      </div>
+      <div class="menu_2" v-else @click="is_show = true">
+        <el-icon color="#595959"><ArrowRightBold /></el-icon>
+      </div>
+      <div class="content">
+        <div class="one">
+          <span>产学研用协同创新数字化平台</span>
+        </div>
+        <div class="two">
+          <div class="two_1">
+            <div class="two_left">当前区域：</div>
+            <div class="two_right">
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">当前产业：</div>
+            <div class="two_right">
+              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">产业链：</div>
+            <div class="two_right">
+              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="thr">
+          <div class="left">
+            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          </div>
+          <div class="right">
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
+            </div>
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
+            </div>
+            <div class="right_2">
+              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import { BorderBox11 } from '@dataview/datav-vue3'
+import myMain from '@/components/dataV/myMain.vue'
+// 图片引入
+import { UserStore } from '@/store/user'
+import { getCity } from '@/utils/city'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 路由
+const is_show = ref(false)
+const form = ref({})
+const list = ref([
+  { label: '产业大脑', route: '/brain' },
+  { label: '产业链供应链监测', route: '/brain/one' },
+  { label: '上市公司监测与培育', route: '/brain/two' },
+  { label: '科技要素整合', route: '/brain/thr' },
+  { label: '人才资源配置', route: '/brain/four' },
+  { label: '营商环境监测', route: '/brain/five' },
+  { label: '优质企业梯度培育', route: '/brain/six' }
+])
+// 字典表
+const cityList = ref([])
+const industryList = ref([{ label: '智能网联汽车', value: '0' }])
+const chainList = ref([{ label: '新能源汽车', value: '0' }])
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+})
+// 查看
+const toView = (item) => {
+  router.push({ path: item.route })
+}
+</script>
+<style scoped lang="scss">
+.brainOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #17171d;
+  padding: 0rem;
+  margin: 0rem;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .menu_1 {
+    display: flex;
+    align-items: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    padding: 1.5rem 1rem;
+    left: 0;
+    top: 35%;
+    border-radius: 0 1rem 1rem 0;
+    font-size: 1.2rem;
+    z-index: 10000;
+    .left {
+      .label {
+        text-align: center;
+        background: rgba(5, 28, 53, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #595959;
+      }
+      .label:hover {
+        text-align: center;
+        background: rgba(20, 123, 233, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        text-shadow:
+          0 0 0.5rem #fff,
+          0 0 1rem #fff,
+          0 0 1.5rem #fff,
+          0 0 2rem #1073ff,
+          0 0 3.5rem #1073ff,
+          0 0 4.5rem #1073ff,
+          0 0 5rem #1073ff,
+          0 0 7.5rem #1073ff;
+      }
+    }
+    .right {
+      margin: 0 0 0 1rem;
+    }
+  }
+  .menu_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    left: 0;
+    top: 35%;
+    height: 22rem;
+    padding: 0 0.3rem;
+    border-radius: 0 1.5rem 1.5rem 0;
+    z-index: 10000;
+  }
+  .content {
+    .one {
+      background: url(/images/brain/titleBg.svg);
+      background-size: 100% 100%;
+      font-size: 2.4rem;
+      text-align: center;
+      color: #53befe;
+      padding: 0.8rem;
+    }
+    .two {
+      display: flex;
+      align-items: center;
+      margin: 0.8rem 0 0 0;
+      color: #ffffff;
+      font-size: 1.2rem;
+      .two_1 {
+        display: flex;
+        align-items: center;
+        margin: 0 0 0 1rem;
+        .two_right {
+          //select 选择器
+          :deep(.el-input__wrapper) {
+            font-size: 1rem;
+            padding: 0.1rem 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+          :deep(.el-select__wrapper) {
+            font-size: 1rem;
+            padding: 0 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+        }
+      }
+    }
+    .thr {
+      display: flex;
+      padding: 0.8rem 0;
+      width: 100%;
+      height: 100%;
+      .left {
+        width: 49%;
+        height: 100%;
+        .thr_1 {
+          width: 100%;
+          height: 86vh;
+        }
+      }
+      .right {
+        width: 61%;
+        height: 100%;
+        .right_1 {
+          width: 100%;
+          display: flex;
+          .thr_2 {
+            width: 100%;
+            height: 31vh;
+          }
+        }
+        .right_2 {
+          width: 100%;
+          .thr_3 {
+            width: 100%;
+            height: 24vh;
+          }
+        }
+      }
+      :deep(.dv-border-box-11-title) {
+        font-size: 1.4rem;
+      }
+    }
+  }
+}
+</style>

src/views/brain/four.vue

@@ -0,0 +1,244 @@
+<template>
+  <myMain>
+    <div class="brainOne">
+      <div class="menu_1" v-if="is_show">
+        <div class="left">
+          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="right" @click="is_show = false">
+          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
+        </div>
+      </div>
+      <div class="menu_2" v-else @click="is_show = true">
+        <el-icon color="#595959"><ArrowRightBold /></el-icon>
+      </div>
+      <div class="content">
+        <div class="one">
+          <span>产学研用协同创新数字化平台</span>
+        </div>
+        <div class="two">
+          <div class="two_1">
+            <div class="two_left">当前区域：</div>
+            <div class="two_right">
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">当前产业：</div>
+            <div class="two_right">
+              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">产业链：</div>
+            <div class="two_right">
+              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="thr">
+          <div class="left">
+            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          </div>
+          <div class="right">
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
+            </div>
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
+            </div>
+            <div class="right_2">
+              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import { BorderBox11 } from '@dataview/datav-vue3'
+import myMain from '@/components/dataV/myMain.vue'
+// 图片引入
+import { UserStore } from '@/store/user'
+import { getCity } from '@/utils/city'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 路由
+const is_show = ref(false)
+const form = ref({})
+const list = ref([
+  { label: '产业大脑', route: '/brain' },
+  { label: '产业链供应链监测', route: '/brain/one' },
+  { label: '上市公司监测与培育', route: '/brain/two' },
+  { label: '科技要素整合', route: '/brain/thr' },
+  { label: '人才资源配置', route: '/brain/four' },
+  { label: '营商环境监测', route: '/brain/five' },
+  { label: '优质企业梯度培育', route: '/brain/six' }
+])
+// 字典表
+const cityList = ref([])
+const industryList = ref([{ label: '智能网联汽车', value: '0' }])
+const chainList = ref([{ label: '新能源汽车', value: '0' }])
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+})
+// 查看
+const toView = (item) => {
+  router.push({ path: item.route })
+}
+</script>
+<style scoped lang="scss">
+.brainOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #17171d;
+  padding: 0rem;
+  margin: 0rem;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .menu_1 {
+    display: flex;
+    align-items: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    padding: 1.5rem 1rem;
+    left: 0;
+    top: 35%;
+    border-radius: 0 1rem 1rem 0;
+    font-size: 1.2rem;
+    z-index: 10000;
+    .left {
+      .label {
+        text-align: center;
+        background: rgba(5, 28, 53, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #595959;
+      }
+      .label:hover {
+        text-align: center;
+        background: rgba(20, 123, 233, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        text-shadow:
+          0 0 0.5rem #fff,
+          0 0 1rem #fff,
+          0 0 1.5rem #fff,
+          0 0 2rem #1073ff,
+          0 0 3.5rem #1073ff,
+          0 0 4.5rem #1073ff,
+          0 0 5rem #1073ff,
+          0 0 7.5rem #1073ff;
+      }
+    }
+    .right {
+      margin: 0 0 0 1rem;
+    }
+  }
+  .menu_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    left: 0;
+    top: 35%;
+    height: 22rem;
+    padding: 0 0.3rem;
+    border-radius: 0 1.5rem 1.5rem 0;
+    z-index: 10000;
+  }
+  .content {
+    .one {
+      background: url(/images/brain/titleBg.svg);
+      background-size: 100% 100%;
+      font-size: 2.4rem;
+      text-align: center;
+      color: #53befe;
+      padding: 0.8rem;
+    }
+    .two {
+      display: flex;
+      align-items: center;
+      margin: 0.8rem 0 0 0;
+      color: #ffffff;
+      font-size: 1.2rem;
+      .two_1 {
+        display: flex;
+        align-items: center;
+        margin: 0 0 0 1rem;
+        .two_right {
+          //select 选择器
+          :deep(.el-input__wrapper) {
+            font-size: 1rem;
+            padding: 0.1rem 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+          :deep(.el-select__wrapper) {
+            font-size: 1rem;
+            padding: 0 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+        }
+      }
+    }
+    .thr {
+      display: flex;
+      padding: 0.8rem 0;
+      width: 100%;
+      height: 100%;
+      .left {
+        width: 49%;
+        height: 100%;
+        .thr_1 {
+          width: 100%;
+          height: 86vh;
+        }
+      }
+      .right {
+        width: 61%;
+        height: 100%;
+        .right_1 {
+          width: 100%;
+          display: flex;
+          .thr_2 {
+            width: 100%;
+            height: 31vh;
+          }
+        }
+        .right_2 {
+          width: 100%;
+          .thr_3 {
+            width: 100%;
+            height: 24vh;
+          }
+        }
+      }
+      :deep(.dv-border-box-11-title) {
+        font-size: 1.4rem;
+      }
+    }
+  }
+}
+</style>

src/views/brain/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <myMain>
+    <div class="brain">
+      <div class="menu_1" v-if="is_show">
+        <div class="left">
+          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="right" @click="is_show = false">
+          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
+        </div>
+      </div>
+      <div class="menu_2" v-else @click="is_show = true">
+        <el-icon color="#595959"><ArrowRightBold /></el-icon>
+      </div>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import myMain from '@/components/dataV/myMain.vue'
+// 图片引入
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 路由
+const is_show = ref(false)
+const list = ref([
+  { label: '产业链供应链监测', route: '/brain/one' },
+  { label: '上市公司监测与培育', route: '/brain/two' },
+  { label: '科技要素整合', route: '/brain/thr' },
+  { label: '人才资源配置', route: '/brain/four' },
+  { label: '营商环境监测', route: '/brain/five' },
+  { label: '优质企业梯度培育', route: '/brain/six' }
+])
+// 查看
+const toView = (item) => {
+  router.push({ path: item.route })
+}
+</script>
+<style scoped lang="scss">
+.brain {
+  position: relative;
+  background: url(/images/brain/brain.png);
+  background-size: 100% 100%;
+  min-height: 100vh;
+  padding: 0px;
+  margin: 0px;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .menu_1 {
+    display: flex;
+    align-items: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    padding: 1.5rem 1rem;
+    left: 0;
+    top: 35%;
+    border-radius: 0 1rem 1rem 0;
+    font-size: 1.2rem;
+    z-index: 10000;
+    .left {
+      .label {
+        text-align: center;
+        background: rgba(5, 28, 53, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #595959;
+      }
+      .label:hover {
+        text-align: center;
+        background: rgba(20, 123, 233, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        text-shadow:
+          0 0 0.5rem #fff,
+          0 0 1rem #fff,
+          0 0 1.5rem #fff,
+          0 0 2rem #1073ff,
+          0 0 3.5rem #1073ff,
+          0 0 4.5rem #1073ff,
+          0 0 5rem #1073ff,
+          0 0 7.5rem #1073ff;
+      }
+    }
+    .right {
+      margin: 0 0 0 1rem;
+    }
+  }
+  .menu_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    left: 0;
+    top: 35%;
+    height: 22rem;
+    padding: 0 0.3rem;
+    border-radius: 0 1.5rem 1.5rem 0;
+    z-index: 10000;
+  }
+}
+</style>

src/views/brain/one.vue

@@ -0,0 +1,244 @@
+<template>
+  <myMain>
+    <div class="brainOne">
+      <div class="menu_1" v-if="is_show">
+        <div class="left">
+          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="right" @click="is_show = false">
+          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
+        </div>
+      </div>
+      <div class="menu_2" v-else @click="is_show = true">
+        <el-icon color="#595959"><ArrowRightBold /></el-icon>
+      </div>
+      <div class="content">
+        <div class="one">
+          <span>产学研用协同创新数字化平台</span>
+        </div>
+        <div class="two">
+          <div class="two_1">
+            <div class="two_left">当前区域：</div>
+            <div class="two_right">
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">当前产业：</div>
+            <div class="two_right">
+              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">产业链：</div>
+            <div class="two_right">
+              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="thr">
+          <div class="left">
+            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          </div>
+          <div class="right">
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
+            </div>
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
+            </div>
+            <div class="right_2">
+              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import { BorderBox11 } from '@dataview/datav-vue3'
+import myMain from '@/components/dataV/myMain.vue'
+// 图片引入
+import { UserStore } from '@/store/user'
+import { getCity } from '@/utils/city'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 路由
+const is_show = ref(false)
+const form = ref({})
+const list = ref([
+  { label: '产业大脑', route: '/brain' },
+  { label: '产业链供应链监测', route: '/brain/one' },
+  { label: '上市公司监测与培育', route: '/brain/two' },
+  { label: '科技要素整合', route: '/brain/thr' },
+  { label: '人才资源配置', route: '/brain/four' },
+  { label: '营商环境监测', route: '/brain/five' },
+  { label: '优质企业梯度培育', route: '/brain/six' }
+])
+// 字典表
+const cityList = ref([])
+const industryList = ref([{ label: '智能网联汽车', value: '0' }])
+const chainList = ref([{ label: '新能源汽车', value: '0' }])
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+})
+// 查看
+const toView = (item) => {
+  router.push({ path: item.route })
+}
+</script>
+<style scoped lang="scss">
+.brainOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #17171d;
+  padding: 0rem;
+  margin: 0rem;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .menu_1 {
+    display: flex;
+    align-items: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    padding: 1.5rem 1rem;
+    left: 0;
+    top: 35%;
+    border-radius: 0 1rem 1rem 0;
+    font-size: 1.2rem;
+    z-index: 10000;
+    .left {
+      .label {
+        text-align: center;
+        background: rgba(5, 28, 53, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #595959;
+      }
+      .label:hover {
+        text-align: center;
+        background: rgba(20, 123, 233, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        text-shadow:
+          0 0 0.5rem #fff,
+          0 0 1rem #fff,
+          0 0 1.5rem #fff,
+          0 0 2rem #1073ff,
+          0 0 3.5rem #1073ff,
+          0 0 4.5rem #1073ff,
+          0 0 5rem #1073ff,
+          0 0 7.5rem #1073ff;
+      }
+    }
+    .right {
+      margin: 0 0 0 1rem;
+    }
+  }
+  .menu_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    left: 0;
+    top: 35%;
+    height: 22rem;
+    padding: 0 0.3rem;
+    border-radius: 0 1.5rem 1.5rem 0;
+    z-index: 10000;
+  }
+  .content {
+    .one {
+      background: url(/images/brain/titleBg.svg);
+      background-size: 100% 100%;
+      font-size: 2.4rem;
+      text-align: center;
+      color: #53befe;
+      padding: 0.8rem;
+    }
+    .two {
+      display: flex;
+      align-items: center;
+      margin: 0.8rem 0 0 0;
+      color: #ffffff;
+      font-size: 1.2rem;
+      .two_1 {
+        display: flex;
+        align-items: center;
+        margin: 0 0 0 1rem;
+        .two_right {
+          //select 选择器
+          :deep(.el-input__wrapper) {
+            font-size: 1rem;
+            padding: 0.1rem 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+          :deep(.el-select__wrapper) {
+            font-size: 1rem;
+            padding: 0 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+        }
+      }
+    }
+    .thr {
+      display: flex;
+      padding: 0.8rem 0;
+      width: 100%;
+      height: 100%;
+      .left {
+        width: 49%;
+        height: 100%;
+        .thr_1 {
+          width: 100%;
+          height: 86vh;
+        }
+      }
+      .right {
+        width: 61%;
+        height: 100%;
+        .right_1 {
+          width: 100%;
+          display: flex;
+          .thr_2 {
+            width: 100%;
+            height: 31vh;
+          }
+        }
+        .right_2 {
+          width: 100%;
+          .thr_3 {
+            width: 100%;
+            height: 24vh;
+          }
+        }
+      }
+      :deep(.dv-border-box-11-title) {
+        font-size: 1.4rem;
+      }
+    }
+  }
+}
+</style>

src/views/brain/six.vue

@@ -0,0 +1,244 @@
+<template>
+  <myMain>
+    <div class="brainOne">
+      <div class="menu_1" v-if="is_show">
+        <div class="left">
+          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="right" @click="is_show = false">
+          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
+        </div>
+      </div>
+      <div class="menu_2" v-else @click="is_show = true">
+        <el-icon color="#595959"><ArrowRightBold /></el-icon>
+      </div>
+      <div class="content">
+        <div class="one">
+          <span>产学研用协同创新数字化平台</span>
+        </div>
+        <div class="two">
+          <div class="two_1">
+            <div class="two_left">当前区域：</div>
+            <div class="two_right">
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">当前产业：</div>
+            <div class="two_right">
+              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">产业链：</div>
+            <div class="two_right">
+              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="thr">
+          <div class="left">
+            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          </div>
+          <div class="right">
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
+            </div>
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
+            </div>
+            <div class="right_2">
+              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import { BorderBox11 } from '@dataview/datav-vue3'
+import myMain from '@/components/dataV/myMain.vue'
+// 图片引入
+import { UserStore } from '@/store/user'
+import { getCity } from '@/utils/city'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 路由
+const is_show = ref(false)
+const form = ref({})
+const list = ref([
+  { label: '产业大脑', route: '/brain' },
+  { label: '产业链供应链监测', route: '/brain/one' },
+  { label: '上市公司监测与培育', route: '/brain/two' },
+  { label: '科技要素整合', route: '/brain/thr' },
+  { label: '人才资源配置', route: '/brain/four' },
+  { label: '营商环境监测', route: '/brain/five' },
+  { label: '优质企业梯度培育', route: '/brain/six' }
+])
+// 字典表
+const cityList = ref([])
+const industryList = ref([{ label: '智能网联汽车', value: '0' }])
+const chainList = ref([{ label: '新能源汽车', value: '0' }])
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+})
+// 查看
+const toView = (item) => {
+  router.push({ path: item.route })
+}
+</script>
+<style scoped lang="scss">
+.brainOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #17171d;
+  padding: 0rem;
+  margin: 0rem;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .menu_1 {
+    display: flex;
+    align-items: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    padding: 1.5rem 1rem;
+    left: 0;
+    top: 35%;
+    border-radius: 0 1rem 1rem 0;
+    font-size: 1.2rem;
+    z-index: 10000;
+    .left {
+      .label {
+        text-align: center;
+        background: rgba(5, 28, 53, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #595959;
+      }
+      .label:hover {
+        text-align: center;
+        background: rgba(20, 123, 233, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        text-shadow:
+          0 0 0.5rem #fff,
+          0 0 1rem #fff,
+          0 0 1.5rem #fff,
+          0 0 2rem #1073ff,
+          0 0 3.5rem #1073ff,
+          0 0 4.5rem #1073ff,
+          0 0 5rem #1073ff,
+          0 0 7.5rem #1073ff;
+      }
+    }
+    .right {
+      margin: 0 0 0 1rem;
+    }
+  }
+  .menu_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    left: 0;
+    top: 35%;
+    height: 22rem;
+    padding: 0 0.3rem;
+    border-radius: 0 1.5rem 1.5rem 0;
+    z-index: 10000;
+  }
+  .content {
+    .one {
+      background: url(/images/brain/titleBg.svg);
+      background-size: 100% 100%;
+      font-size: 2.4rem;
+      text-align: center;
+      color: #53befe;
+      padding: 0.8rem;
+    }
+    .two {
+      display: flex;
+      align-items: center;
+      margin: 0.8rem 0 0 0;
+      color: #ffffff;
+      font-size: 1.2rem;
+      .two_1 {
+        display: flex;
+        align-items: center;
+        margin: 0 0 0 1rem;
+        .two_right {
+          //select 选择器
+          :deep(.el-input__wrapper) {
+            font-size: 1rem;
+            padding: 0.1rem 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+          :deep(.el-select__wrapper) {
+            font-size: 1rem;
+            padding: 0 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+        }
+      }
+    }
+    .thr {
+      display: flex;
+      padding: 0.8rem 0;
+      width: 100%;
+      height: 100%;
+      .left {
+        width: 49%;
+        height: 100%;
+        .thr_1 {
+          width: 100%;
+          height: 86vh;
+        }
+      }
+      .right {
+        width: 61%;
+        height: 100%;
+        .right_1 {
+          width: 100%;
+          display: flex;
+          .thr_2 {
+            width: 100%;
+            height: 31vh;
+          }
+        }
+        .right_2 {
+          width: 100%;
+          .thr_3 {
+            width: 100%;
+            height: 24vh;
+          }
+        }
+      }
+      :deep(.dv-border-box-11-title) {
+        font-size: 1.4rem;
+      }
+    }
+  }
+}
+</style>

src/views/brain/thr.vue

@@ -0,0 +1,580 @@
+<template>
+  <myMain>
+    <div class="brainOne">
+      <div class="menu_1" v-if="is_show">
+        <div class="left">
+          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="right" @click="is_show = false">
+          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
+        </div>
+      </div>
+      <div class="menu_2" v-else @click="is_show = true">
+        <el-icon color="#595959"><ArrowRightBold /></el-icon>
+      </div>
+      <div class="content">
+        <div class="one">
+          <span>产学研用协同创新数字化平台</span>
+        </div>
+        <div class="two">
+          <div class="two_1">
+            <div class="two_left">当前区域：</div>
+            <div class="two_right">
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">当前产业：</div>
+            <div class="two_right">
+              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">产业链：</div>
+            <div class="two_right">
+              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="thr">
+          <div class="thr_1">
+            <BorderBox13 class="boxall boxall_1" title="产业分布">
+              <div class="title">
+                <div class="titleRight">产业分布</div>
+                <div class="titleLeft">智能网联汽车</div>
+              </div>
+              <div class="select">
+                <div class="select_1">
+                  <div class="select_left">指标:</div>
+                  <div class="select_right">
+                    <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                      <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </div>
+                </div>
+                <div class="select_1">
+                  <div class="select_left">对比对象:</div>
+                  <div class="select_right">
+                    <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+                  </div>
+                </div>
+              </div>
+              <echarts1></echarts1>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_2" title="区域创新资源">
+              <div class="title center">
+                <div class="titleRight">区域创新资源</div>
+              </div>
+            </BorderBox13>
+          </div>
+          <div class="thr_2">
+            <BorderBox13 class="boxall boxall_3" title="国家重点研发项目">
+              <div class="title center">
+                <div class="titleRight">国家重点研发项目</div>
+              </div>
+              <echarts3></echarts3>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_4" title="全国产业化项目">
+              <div class="title center">
+                <div class="titleRight">全国产业化项目</div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_5" title="全国科技成果">
+              <div class="title center">
+                <div class="titleRight">全国科技成果</div>
+              </div>
+              <echarts2></echarts2>
+            </BorderBox13>
+          </div>
+          <div class="thr_3">
+            <BorderBox13 class="boxall boxall_6" title="区域承担研发项目">
+              <div class="title">
+                <div class="titleRight">区域承担研发项目</div>
+                <div class="titleLeft">更多</div>
+              </div>
+              <div class="list" v-for="(item, index) in list_1" :key="index">
+                <div class="list_1">
+                  <div class="list_left textOne">{{ item.name || '暂无' }}</div>
+                  <div class="list_right">{{ item.time || '暂无' }}</div>
+                </div>
+                <div class="list_2">
+                  <span>{{ item.area || '暂无' }}</span>
+                </div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_7" title="区域产业化项目">
+              <div class="title">
+                <div class="titleRight">区域产业化项目</div>
+                <div class="titleLeft">更多</div>
+              </div>
+              <div class="list" v-for="(item, index) in list_2" :key="index">
+                <div class="list_1">
+                  <div class="list_left textOne">{{ item.name || '暂无' }}</div>
+                  <div class="list_right">{{ item.time || '暂无' }}</div>
+                </div>
+                <div class="list_2">
+                  <span>{{ item.person || '暂无' }}</span>
+                  <span>{{ item.area || '暂无' }}</span>
+                </div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_8" title="区域科技成果">
+              <div class="title">
+                <div class="titleRight">区域科技成果</div>
+                <div class="titleLeft">更多</div>
+              </div>
+              <div class="list" v-for="(item, index) in list_3" :key="index">
+                <div class="list_1">
+                  <div class="list_left textOne">{{ item.name || '暂无' }}</div>
+                  <div class="list_right">{{ item.time || '暂无' }}</div>
+                </div>
+                <div class="list_3" v-if="item.brief">
+                  <span>{{ item.brief || '暂无' }}</span>
+                </div>
+              </div>
+            </BorderBox13>
+          </div>
+          <div class="thr_4">
+            <BorderBox13 class="boxall boxall_9" title="区域项目研发承担单位">
+              <div class="title center">
+                <div class="titleRight">区域项目研发承担单位</div>
+              </div>
+              <div class="select">
+                <div class="select_1">
+                  <div class="select_left">TOP:</div>
+                  <div class="select_right">
+                    <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                      <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </div>
+                </div>
+              </div>
+              <echarts4></echarts4>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_10" title="区域产业化项目承担单位">
+              <div class="title center">
+                <div class="titleRight">区域产业化项目承担单位</div>
+              </div>
+              <echarts5></echarts5>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_11" title="区域成果完成单位">
+              <div class="title center">
+                <div class="titleRight">区域成果完成单位</div>
+              </div>
+              <echarts6></echarts6>
+            </BorderBox13>
+          </div>
+          <div class="thr_5">
+            <BorderBox13 class="boxall boxall_12" title="重点培育企业">
+              <div class="title">
+                <div class="titleRight">重点培育企业</div>
+                <div class="titleLeft">更多</div>
+              </div>
+              <div class="list" v-for="(item, index) in list_4" :key="index">
+                <div class="list_4">
+                  <span>{{ item.name || '暂无' }}</span>
+                </div>
+                <div class="list_1">
+                  <span>上市板块：{{ item.plate || '暂无' }}</span>
+                  <span>市值：{{ item.money || '暂无' }}</span>
+                </div>
+                <div class="list_5">
+                  <span>重大研发项目数：{{ item.total1 || '暂无' }}</span>
+                  <span>产业化项目数：{{ item.total2 || '暂无' }}</span>
+                  <span>成果数：{{ item.total3 || '暂无' }}</span>
+                  <span>科技平台数：{{ item.total4 || '暂无' }}</span>
+                  <span>制定标准数：{{ item.total5 || '暂无' }}</span>
+                </div>
+              </div>
+            </BorderBox13>
+            <BorderBox13 class="boxall boxall_13" title="科技舆情">
+              <div class="title">
+                <div class="titleRight">科技舆情</div>
+                <div class="titleLeft">更多</div>
+              </div>
+              <div class="list" v-for="(item, index) in list_5" :key="index">
+                <div class="list_4">
+                  <span>{{ item.name || '暂无' }}</span>
+                </div>
+                <div class="list_3" v-if="item.person">
+                  <span>{{ item.person || '暂无' }}</span>
+                </div>
+              </div>
+            </BorderBox13>
+          </div>
+        </div>
+      </div>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import { BorderBox13 } from '@dataview/datav-vue3'
+import myMain from '@/components/dataV/myMain.vue'
+// 组件
+import echarts1 from './thr/echarts1.vue'
+import echarts2 from './thr/echarts2.vue'
+import echarts3 from './thr/echarts3.vue'
+import echarts4 from './thr/echarts4.vue'
+import echarts5 from './thr/echarts5.vue'
+import echarts6 from './thr/echarts6.vue'
+// 图片引入
+import { UserStore } from '@/store/user'
+import { getCity } from '@/utils/city'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 路由
+const is_show = ref(false)
+const form = ref({})
+const list = ref([
+  { label: '产业大脑', route: '/brain' },
+  { label: '产业链供应链监测', route: '/brain/one' },
+  { label: '上市公司监测与培育', route: '/brain/two' },
+  { label: '科技要素整合', route: '/brain/thr' },
+  { label: '人才资源配置', route: '/brain/four' },
+  { label: '营商环境监测', route: '/brain/five' },
+  { label: '优质企业梯度培育', route: '/brain/six' }
+])
+// 字典表
+const cityList = ref([])
+const industryList = ref([{ label: '智能网联汽车', value: '0' }])
+const chainList = ref([{ label: '新能源汽车', value: '0' }])
+// 区域承担研发项目
+const list_1 = ref([
+  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' },
+  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' },
+  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' },
+  { name: '国家重点研发计划-材料基因…', time: '2024', area: '吉林大学' }
+])
+// 区域产业化项目
+const list_2 = ref([
+  { name: '基于压膜芯片的陶瓷电容式车…', person: '陈石煤', time: '2024', area: '吉林大学' },
+  { name: '基于压膜芯片的陶瓷电容式车…', person: '陈石煤', time: '2024', area: '吉林大学' }
+])
+// 区域科技成果
+const list_3 = ref([
+  {
+    name: '磷酸铁锂动力电池制造及其…',
+    brief: '长春中聚佳华电池科技有限公司,长春交通大学,教育部,比亚迪汽车工业有限公司,江苏乐能电池股份有限公司丁建民,何雨石,尹韶文,廖小珍,张子峰,杨军沈佳妮,贺益君,赵政贼,马紫峰',
+    time: '2024',
+    area: '吉林大学'
+  },
+  {
+    name: '磷酸铁锂动力电池制造及其…',
+    time: '2024',
+    area: '吉林大学'
+  }
+])
+// 区域产业化项目
+const list_4 = ref([
+  { name: '中兴通讯股份有限公司', plate: '深交所主服', money: '1134.28亿', total1: '5', total2: '1', total3: '70', total4: '1', total5: '899' },
+  { name: '中兴通讯股份有限公司', plate: '深交所主服', money: '1134.28亿', total1: '5', total2: '1', total3: '70', total4: '1', total5: '899' },
+  { name: '中兴通讯股份有限公司', plate: '深交所主服', money: '1134.28亿', total1: '5', total2: '1', total3: '70', total4: '1', total5: '899' }
+])
+// 科技舆情
+const list_5 = ref([
+  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
+  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
+  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
+  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' },
+  { name: '长春市发展改革委关于长春慧天云网新能源…', person: '长春市政策-发改委', time: '2024' }
+])
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+})
+// 查看
+const toView = (item) => {
+  router.push({ path: item.route })
+}
+</script>
+<style scoped lang="scss">
+.brainOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  // background-color: #17171d;
+  background: url(/images/brain/brain-bg.gif);
+  background-size: 100% 100%;
+  padding: 0rem;
+  margin: 0rem;
+  color: #ffffff;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .menu_1 {
+    display: flex;
+    align-items: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    padding: 1.5rem 1rem;
+    left: 0;
+    top: 35%;
+    border-radius: 0 1rem 1rem 0;
+    font-size: 1.2rem;
+    z-index: 10000;
+    .left {
+      .label {
+        text-align: center;
+        background: rgba(5, 28, 53, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #595959;
+      }
+      .label:hover {
+        text-align: center;
+        background: rgba(20, 123, 233, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        text-shadow:
+          0 0 0.5rem #fff,
+          0 0 1rem #fff,
+          0 0 1.5rem #fff,
+          0 0 2rem #1073ff,
+          0 0 3.5rem #1073ff,
+          0 0 4.5rem #1073ff,
+          0 0 5rem #1073ff,
+          0 0 7.5rem #1073ff;
+      }
+    }
+    .right {
+      margin: 0 0 0 1rem;
+    }
+  }
+  .menu_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    left: 0;
+    top: 35%;
+    height: 22rem;
+    padding: 0 0.3rem;
+    border-radius: 0 1.5rem 1.5rem 0;
+    z-index: 10000;
+  }
+  .content {
+    .one {
+      background: url(/images/brain/titleBg.svg);
+      background-size: 100% 100%;
+      font-size: 2.4rem;
+      text-align: center;
+      color: #53befe;
+      padding: 0.8rem;
+      span {
+        letter-spacing: 0.2em;
+      }
+    }
+    .two {
+      display: flex;
+      align-items: center;
+      margin: 0.8rem 0 0 0;
+      color: #ffffff;
+      font-size: 1.2rem;
+      .two_1 {
+        display: flex;
+        align-items: center;
+        margin: 0 0 0 1rem;
+      }
+    }
+    .thr {
+      display: flex;
+      padding: 0.8rem 0;
+      width: 100%;
+      height: 100%;
+      .thr_1 {
+        width: 24%;
+        height: 100%;
+        .boxall_1 {
+          width: 100%;
+          height: 50vh;
+        }
+        .boxall_2 {
+          width: 100%;
+          height: 36vh;
+        }
+      }
+      .thr_2 {
+        width: 20%;
+        height: 100%;
+        .boxall_3 {
+          width: 100%;
+          height: 36vh;
+        }
+        .boxall_4 {
+          width: 100%;
+          height: 25vh;
+        }
+        .boxall_5 {
+          width: 100%;
+          height: 25vh;
+        }
+      }
+      .thr_3 {
+        width: 16%;
+        height: 100%;
+        .boxall_6 {
+          width: 100%;
+          height: 36vh;
+        }
+        .boxall_7 {
+          width: 100%;
+          height: 25vh;
+        }
+        .boxall_8 {
+          width: 100%;
+          height: 25vh;
+        }
+      }
+      .thr_4 {
+        width: 20%;
+        height: 100%;
+        .boxall_9 {
+          width: 100%;
+          height: 36vh;
+        }
+        .boxall_10 {
+          width: 100%;
+          height: 25vh;
+        }
+        .boxall_11 {
+          width: 100%;
+          height: 25vh;
+        }
+      }
+      .thr_5 {
+        width: 20%;
+        height: 100%;
+        .boxall_12 {
+          width: 100%;
+          height: 50vh;
+        }
+        .boxall_13 {
+          width: 100%;
+          height: 36vh;
+        }
+      }
+      .boxall {
+        padding: 1.5rem 1rem;
+        .title {
+          display: flex;
+          justify-content: space-between;
+          background-color: rgba($color: #18459d, $alpha: 0.3);
+          padding: 0.8rem;
+          border-bottom: 0.1rem solid #18459d;
+          -webkit-animation: twinkling 2s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
+        }
+        .center {
+          justify-content: center !important;
+          align-items: center;
+        }
+        @-webkit-keyframes twinkling {
+          /*透明度由0到1*/
+          0% {
+            border-color: #1a9cd8;
+            box-shadow:
+              0 0 10px rgba(22, 106, 185, 0.2),
+              inset 0 0 10px rgba(25, 181, 243, 0.1),
+              0 1px 0 rgb(59, 166, 228);
+          }
+          100% {
+            border-color: rgb(75, 99, 235);
+            box-shadow:
+              0 0 25px rgba(32, 104, 238, 0.6),
+              inset 0 0 15px rgba(34, 100, 221, 0.4),
+              0 1px 0 rgb(68, 110, 250);
+          }
+        }
+        .select {
+          margin: 0.5rem 0;
+          .select_1 {
+            display: flex;
+            align-items: center;
+            margin: 0.5rem 0;
+            .select_left {
+              width: 5rem;
+              margin: 0 0.2rem 0 0;
+            }
+          }
+        }
+        .list {
+          margin: 0.5rem 0 0 0;
+          padding: 0 0.5rem;
+          width: 100%;
+          .list_1 {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .list_left {
+              width: 80%;
+              font-size: 1.2rem;
+              color: #75f9fd;
+            }
+            .list_right {
+              text-align: center;
+              padding: 0.4rem;
+              width: 20%;
+              background-color: #54bcbd;
+              border-radius: 0.2rem;
+            }
+          }
+          .list_2 {
+            margin: 0.8rem 0 0 0;
+            span {
+              padding: 0.2rem 0.5rem;
+              border-radius: 0.2rem;
+              margin: 0 0.5rem 0 0;
+              background-color: rgba($color: #ffffff, $alpha: 0.1);
+            }
+          }
+          .list_4 {
+            margin: 0 0 0.5rem 0;
+            font-size: 1.2rem;
+            color: #75f9fd;
+          }
+          .list_5 {
+            display: flex;
+            flex-wrap: wrap;
+            span {
+              padding: 0.2rem 0.5rem;
+              border-radius: 0.2rem;
+              margin: 0.4rem 0.5rem 0.2rem 0;
+              color: #ebc128;
+              background-color: rgba($color: #ffffff, $alpha: 0.1);
+            }
+          }
+        }
+      }
+      :deep(.dv-border-box-11-title) {
+        font-size: 1.4rem;
+      }
+    }
+  }
+  //select 选择器
+  :deep(.el-input__wrapper) {
+    font-size: 1rem;
+    padding: 0.1rem 1rem;
+    background-color: rgba(17, 43, 73, 1) !important;
+  }
+  :deep(.el-select__wrapper) {
+    font-size: 1rem;
+    padding: 0 1rem;
+    background-color: rgba(17, 43, 73, 1) !important;
+  }
+}
+</style>

src/views/brain/thr/echarts1.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 34vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts1 = ref()
+onMounted(() => {
+  echarts1View()
+})
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      backgroundColor: 'rgba(32, 33, 36,.7)',
+      borderColor: 'rgba(32, 33, 36,0.20)',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        color: '#fff',
+        fontSize: '12'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '18%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/brain/thr/echarts2.vue

@@ -0,0 +1,51 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 18vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  echarts2View()
+})
+function echarts2View() {
+  const myChart2 = echarts.init(echarts2.value)
+  const option2 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['45%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          alignTo: 'labelLine',
+          lineHeight: 15,
+          edgeDistance: 10,
+          color: '#FFFFFF',
+          fontSize: '14'
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        data: [
+          { value: 1048, name: '国家级' },
+          { value: 735, name: '省级' }
+        ]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/brain/thr/echarts3.vue

@@ -0,0 +1,98 @@
+<template>
+  <div ref="echarts3" class="echarts3"></div>
+</template>
+<style scoped lang="scss">
+.echarts3 {
+  height: 28vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+onMounted(() => {
+  echarts3View()
+})
+function echarts3View() {
+  const myChart3 = echarts.init(echarts3.value)
+  const option3 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      backgroundColor: 'rgba(32, 33, 36,.7)',
+      borderColor: 'rgba(32, 33, 36,0.20)',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        color: '#fff',
+        fontSize: '12'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      }
+    },
+    yAxis: {
+      type: 'category',
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [0, 12, 12, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/brain/thr/echarts4.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts4" class="echarts4"></div>
+</template>
+<style scoped lang="scss">
+.echarts4 {
+  height: 24vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+onMounted(() => {
+  echarts4View()
+})
+function echarts4View() {
+  const myChart4 = echarts.init(echarts4.value)
+  const option4 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      backgroundColor: 'rgba(32, 33, 36,.7)',
+      borderColor: 'rgba(32, 33, 36,0.20)',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        color: '#fff',
+        fontSize: '12'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['吉林大学', '理工大学']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [12421, 2549],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/brain/thr/echarts5.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts4" class="echarts4"></div>
+</template>
+<style scoped lang="scss">
+.echarts4 {
+  height: 17.5vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+onMounted(() => {
+  echarts4View()
+})
+function echarts4View() {
+  const myChart4 = echarts.init(echarts4.value)
+  const option4 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      backgroundColor: 'rgba(32, 33, 36,.7)',
+      borderColor: 'rgba(32, 33, 36,0.20)',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        color: '#fff',
+        fontSize: '12'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '10%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['长春XXX公司', '长春XXX公司']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [12421, 2549],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/brain/thr/echarts6.vue

@@ -0,0 +1,96 @@
+<template>
+  <div ref="echarts4" class="echarts4"></div>
+</template>
+<style scoped lang="scss">
+.echarts4 {
+  height: 18vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+onMounted(() => {
+  echarts4View()
+})
+function echarts4View() {
+  const myChart4 = echarts.init(echarts4.value)
+  const option4 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      backgroundColor: 'rgba(32, 33, 36,.7)',
+      borderColor: 'rgba(32, 33, 36,0.20)',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        color: '#fff',
+        fontSize: '12'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '10%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          color: 'white', //坐标值得具体的颜色
+          fontSize: '10'
+        }
+      },
+      data: ['A', 'B', 'C', 'D', 'E', 'F']
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          color: 'white' //坐标值得具体的颜色
+        }
+      }
+    },
+    series: [
+      {
+        data: [2549, 12421, 2637, 3146, 15189, 9562],
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/brain/two.vue

@@ -0,0 +1,244 @@
+<template>
+  <myMain>
+    <div class="brainOne">
+      <div class="menu_1" v-if="is_show">
+        <div class="left">
+          <div class="label" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="right" @click="is_show = false">
+          <el-icon color="#595959"><ArrowLeftBold /></el-icon>
+        </div>
+      </div>
+      <div class="menu_2" v-else @click="is_show = true">
+        <el-icon color="#595959"><ArrowRightBold /></el-icon>
+      </div>
+      <div class="content">
+        <div class="one">
+          <span>产学研用协同创新数字化平台</span>
+        </div>
+        <div class="two">
+          <div class="two_1">
+            <div class="two_left">当前区域：</div>
+            <div class="two_right">
+              <el-cascader placeholder="请选择" v-model="form.area" :props="{ value: 'label', label: 'label' }" :options="cityList" style="width: 14rem" />
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">当前产业：</div>
+            <div class="two_right">
+              <el-select v-model="form.industry" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in industryList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+          <div class="two_1">
+            <div class="two_left">产业链：</div>
+            <div class="two_right">
+              <el-select v-model="form.chain" clearable placeholder="请选择" style="width: 14rem">
+                <el-option v-for="(item, index) in chainList" :key="index" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="thr">
+          <div class="left">
+            <BorderBox11 class="thr_1" title="产业链图谱"></BorderBox11>
+          </div>
+          <div class="right">
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="完整性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="安全性"></BorderBox11>
+            </div>
+            <div class="right_1">
+              <BorderBox11 class="thr_2" title="韧性"></BorderBox11>
+              <BorderBox11 class="thr_2" title="稳定性"></BorderBox11>
+            </div>
+            <div class="right_2">
+              <BorderBox11 class="thr_3" title="可靠性"> </BorderBox11>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import { BorderBox11 } from '@dataview/datav-vue3'
+import myMain from '@/components/dataV/myMain.vue'
+// 图片引入
+import { UserStore } from '@/store/user'
+import { getCity } from '@/utils/city'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 路由
+const is_show = ref(false)
+const form = ref({})
+const list = ref([
+  { label: '产业大脑', route: '/brain' },
+  { label: '产业链供应链监测', route: '/brain/one' },
+  { label: '上市公司监测与培育', route: '/brain/two' },
+  { label: '科技要素整合', route: '/brain/thr' },
+  { label: '人才资源配置', route: '/brain/four' },
+  { label: '营商环境监测', route: '/brain/five' },
+  { label: '优质企业梯度培育', route: '/brain/six' }
+])
+// 字典表
+const cityList = ref([])
+const industryList = ref([{ label: '智能网联汽车', value: '0' }])
+const chainList = ref([{ label: '新能源汽车', value: '0' }])
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+})
+// 查看
+const toView = (item) => {
+  router.push({ path: item.route })
+}
+</script>
+<style scoped lang="scss">
+.brainOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #17171d;
+  padding: 0rem;
+  margin: 0rem;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  .menu_1 {
+    display: flex;
+    align-items: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    padding: 1.5rem 1rem;
+    left: 0;
+    top: 35%;
+    border-radius: 0 1rem 1rem 0;
+    font-size: 1.2rem;
+    z-index: 10000;
+    .left {
+      .label {
+        text-align: center;
+        background: rgba(5, 28, 53, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #595959;
+      }
+      .label:hover {
+        text-align: center;
+        background: rgba(20, 123, 233, 0.2);
+        padding: 0.5rem;
+        margin: 0 0 1rem 0;
+        border-radius: 0.5rem;
+        color: #ffffff;
+        text-shadow:
+          0 0 0.5rem #fff,
+          0 0 1rem #fff,
+          0 0 1.5rem #fff,
+          0 0 2rem #1073ff,
+          0 0 3.5rem #1073ff,
+          0 0 4.5rem #1073ff,
+          0 0 5rem #1073ff,
+          0 0 7.5rem #1073ff;
+      }
+    }
+    .right {
+      margin: 0 0 0 1rem;
+    }
+  }
+  .menu_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(194, 209, 225, 0.2);
+    position: absolute;
+    left: 0;
+    top: 35%;
+    height: 22rem;
+    padding: 0 0.3rem;
+    border-radius: 0 1.5rem 1.5rem 0;
+    z-index: 10000;
+  }
+  .content {
+    .one {
+      background: url(/images/brain/titleBg.svg);
+      background-size: 100% 100%;
+      font-size: 2.4rem;
+      text-align: center;
+      color: #53befe;
+      padding: 0.8rem;
+    }
+    .two {
+      display: flex;
+      align-items: center;
+      margin: 0.8rem 0 0 0;
+      color: #ffffff;
+      font-size: 1.2rem;
+      .two_1 {
+        display: flex;
+        align-items: center;
+        margin: 0 0 0 1rem;
+        .two_right {
+          //select 选择器
+          :deep(.el-input__wrapper) {
+            font-size: 1rem;
+            padding: 0.1rem 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+          :deep(.el-select__wrapper) {
+            font-size: 1rem;
+            padding: 0 1rem;
+            background-color: rgba(17, 43, 73, 1) !important;
+          }
+        }
+      }
+    }
+    .thr {
+      display: flex;
+      padding: 0.8rem 0;
+      width: 100%;
+      height: 100%;
+      .left {
+        width: 49%;
+        height: 100%;
+        .thr_1 {
+          width: 100%;
+          height: 86vh;
+        }
+      }
+      .right {
+        width: 61%;
+        height: 100%;
+        .right_1 {
+          width: 100%;
+          display: flex;
+          .thr_2 {
+            width: 100%;
+            height: 31vh;
+          }
+        }
+        .right_2 {
+          width: 100%;
+          .thr_3 {
+            width: 100%;
+            height: 24vh;
+          }
+        }
+      }
+      :deep(.dv-border-box-11-title) {
+        font-size: 1.4rem;
+      }
+    }
+  }
+}
+</style>

src/views/detail/news.vue

@@ -6,12 +6,7 @@
           <h2 class="name">双高新闻资讯</h2>
           <h5 class="remark">跟紧政策指引方向 &nbsp;&nbsp;&nbsp; 抓牢各地双高机遇</h5>
           <div class="search">
-            <el-input
-              v-model="input1"
-              size="large"
-              placeholder="请输入关键字"
-              :suffix-icon="Search"
-            >
+            <el-input v-model="input1" size="large" placeholder="请输入关键字" :suffix-icon="Search">
               <template #append>
                 <el-button type="primary" size="large">搜索</el-button>
               </template>
@@ -21,20 +16,9 @@
         <el-col :span="24" class="one_2">
           <el-col :span="24" class="two">
             <el-col :span="18" class="left">
-              <el-col
-                :span="24"
-                class="list"
-                v-for="(item, index) in list"
-                :key="index"
-                @click="toView(item)"
-              >
+              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
                 <el-col :span="6" class="left">
-                  <el-image
-                    class="image"
-                    v-if="item.logo && item.logo.length > 0"
-                    :src="getUrl(item.logo)"
-                    fit="fill"
-                  >
+                  <el-image class="image" v-if="item.logo && item.logo.length > 0" :src="getUrl(item.logo)" fit="fill">
                     <template v-slot:error>
                       <el-image class="image" :src="new_4" fit="fill" />
                     </template>
@@ -61,11 +45,7 @@
               </el-col>
               <el-col :span="24" class="content">
                 <a-timeline>
-                  <a-timeline-item
-                    v-for="(item, index) in achievementList"
-                    :key="index"
-                    @click="toCommon(item, '/achievement/detail')"
-                  >
+                  <a-timeline-item v-for="(item, index) in achievementList" :key="index" @click="toCommon(item, '/achievement/detail')">
                     <div class="name textOne">{{ item.name }}</div>
                     <div class="time">{{ item.time }}</div>
                   </a-timeline-item>
@@ -77,11 +57,7 @@
               </el-col>
               <el-col :span="24" class="content">
                 <a-timeline>
-                  <a-timeline-item
-                    v-for="(item, index) in projectList"
-                    :key="index"
-                    @click="toCommon(item, '/project/detail')"
-                  >
+                  <a-timeline-item v-for="(item, index) in projectList" :key="index" @click="toCommon(item, '/project/detail')">
                     <div class="name textOne">{{ item.name }}</div>
                     <div class="time">{{ item.time }}</div>
                   </a-timeline-item>
@@ -90,17 +66,7 @@
             </el-col>
           </el-col>
           <el-col :span="24" class="thr">
-            <el-pagination
-              background
-              layout="total, prev, pager, next"
-              :page-sizes="[10, 20, 50, 100, 200]"
-              :total="total"
-              :page-size="limit"
-              v-model:current-page="currentPage"
-              @current-change="changePage"
-              @size-change="sizeChange"
-            >
-            </el-pagination>
+            <el-pagination background layout="total, prev, pager, next" :page-sizes="[10, 20, 50, 100, 200]" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange"> </el-pagination>
           </el-col>
         </el-col>
       </div>
@@ -215,7 +181,7 @@ const getUrl = (item) => {
       }
       .remark {
         margin: 27px 0 80px;
-        font-size: 14px;
+        font-size: $global-font-size-14;
         color: #ffffff;
         text-align: center;
       }

src/views/elevenHatch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main">
+  <div class="elevenHatch">
     <el-row>
       <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
         <div class="head">
@@ -79,7 +79,7 @@
             </el-col>
             <el-col :span="6">
               <div class="center_1">
-                <div class="boxall">
+                <div class="boxall bottom">
                   <div class="alltitle">视频监控</div>
                   <div v-for="(item, index) in twoList" :key="index">
                     <el-image class="image" :src="item.url" fit="fill" />
@@ -153,10 +153,10 @@ onBeforeUnmount(() => {
 })
 </script>
 <style scoped lang="scss">
-.main {
+.elevenHatch {
   width: 100%;
   position: relative;
-  background: url('./images/bg.jpg');
+  background: url(/images/bg.jpg);
   background-size: 100% 100%;
   padding: 0px;
   margin: 0px;
@@ -173,24 +173,24 @@ onBeforeUnmount(() => {
   }
   .head {
     position: relative;
-    height: 4rem;
-    background: url('./images/head_bg.png') no-repeat center center;
+    height: 70px;
+    background: url(/images/head_bg.png) no-repeat center center;
     background-size: 100% 100%;
     .head_1 {
       color: #fff;
       text-align: center;
-      font-size: 2.3rem;
-      line-height: 2.3rem;
-      margin: 1rem 0;
+      font-size: 38px;
+      line-height: 38px;
+      margin: 20px 0;
     }
     .head_2 {
       position: absolute;
-      right: 1rem;
-      top: 0.2rem;
-      line-height: 1.5rem;
+      right: 10px;
+      top: 5px;
+      line-height: 20px;
       color: rgba(255, 255, 255, 0.7);
-      font-size: 1.5rem;
-      padding-right: 0.5rem;
+      font-size: 20px;
+      padding-right: 10px;
       font-family: electronicFont;
     }
   }
@@ -207,6 +207,9 @@ onBeforeUnmount(() => {
         margin-bottom: 10px;
         z-index: 10;
       }
+      .bottom {
+        margin-bottom: 0;
+      }
 
       .alltitle {
         font-size: $global-font-size-20;
@@ -227,8 +230,8 @@ onBeforeUnmount(() => {
         left: 0;
       }
       .image {
-        width: 100%;
-        height: 185px;
+        width: 430px;
+        height: 187px;
       }
       .wraptit span {
         display: inline-block;
@@ -318,7 +321,7 @@ onBeforeUnmount(() => {
         letter-spacing: 2px;
       }
       .one {
-        height: 5rem;
+        height: 72px;
         overflow: hidden;
         .scroll {
           width: 100%;
@@ -326,8 +329,8 @@ onBeforeUnmount(() => {
             display: flex;
             justify-content: space-between;
             border: 1px solid rgba(25, 186, 139, 0.17);
-            padding: 0.2rem;
-            margin: 0 0 0.5rem 0;
+            padding: 10px;
+            margin: 0 0 10px 0;
             .other:first-child {
               width: 40%;
             }
@@ -338,7 +341,7 @@ onBeforeUnmount(() => {
               text-overflow: ellipsis;
               white-space: nowrap;
               overflow: hidden;
-              font-size: 0.8rem;
+              font-size: 16px;
             }
           }
         }

src/views/elevenHatch/path/echarts2.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <div ref="echarts2" class="echarts2" style="height: 260px; width: 100%"></div>
+    <div ref="echarts2" class="echarts2"></div>
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+.echarts2 {
+  height: 260px;
+  width: 100%;
+}
+</style>
 <script setup>
 import * as echarts from 'echarts'
 const echarts2 = ref()

src/views/elevenHatch/path/echarts3.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <div ref="echarts3" class="echarts3" style="height: 240px; width: 100%"></div>
+    <div ref="echarts3" class="echarts3"></div>
   </div>
 </template>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.echarts3 {
+  height: 250px;
+  width: 100%;
+}
+</style>
 <script setup>
 import * as echarts from 'echarts'
 const echarts3 = ref()

src/views/elevenHatch/path/echarts4.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <div ref="echarts4" class="echarts4" style="height: 242px; width: 100%"></div>
+    <div ref="echarts4" class="echarts4"></div>
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+.echarts4 {
+  height: 242px;
+  width: 100%;
+}
+</style>
 <script setup>
 import * as echarts from 'echarts'
 const echarts4 = ref()

src/views/elevenHatch/path/echarts5.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <div ref="echarts5" class="echarts5" style="height: 110px; width: 100%"></div>
+    <div ref="echarts5" class="echarts5"></div>
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+.echarts5 {
+  height: 110px;
+  width: 150px;
+}
+</style>
 <script setup>
 import * as echarts from 'echarts'
 const echarts5 = ref()

src/views/elevenHatch/path/echarts6.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <div ref="echarts6" class="echarts6" style="height: 110px; width: 100%"></div>
+    <div ref="echarts6" class="echarts6"></div>
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+.echarts6 {
+  height: 110px;
+  width: 150px;
+}
+</style>
 <script setup>
 import * as echarts from 'echarts'
 const echarts6 = ref()

src/views/elevenHatch/path/echarts7.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
-    <div ref="echarts7" class="echarts7" style="height: 110px; width: 100%"></div>
+    <div ref="echarts7" class="echarts7"></div>
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+.echarts7 {
+  height: 110px;
+  width: 150px;
+}
+</style>
 <script setup>
 import * as echarts from 'echarts'
 const echarts7 = ref()

src/views/five/index.vue

@@ -32,7 +32,7 @@
           <el-row class="two_1_2">
             <el-col :span="1" class="left">状态</el-col>
             <el-col :span="23" class="right">
-              <a-button
+              <div
                 class="title"
                 v-for="(item, index) in statusList"
                 :key="index"
@@ -42,13 +42,13 @@
                 :class="[item.is_active ? 'show' : '']"
               >
                 {{ item.label }}
-              </a-button>
+              </div>
             </el-col>
           </el-row>
           <el-row class="two_1_2">
             <el-col :span="1" class="left">技术</el-col>
             <el-col :span="23" class="right">
-              <a-button
+              <div
                 class="title"
                 v-for="(item, index) in typeList"
                 :key="index"
@@ -58,13 +58,13 @@
                 :class="[item.is_active ? 'show' : '']"
               >
                 {{ item.label }}
-              </a-button>
+              </div>
             </el-col>
           </el-row>
           <el-row class="two_1_2">
             <el-col :span="1" class="left">行业</el-col>
             <el-col :span="22" class="right" v-if="oneShow">
-              <a-button
+              <div
                 class="title"
                 v-for="(item, index) in industryList"
                 :key="index"
@@ -74,12 +74,12 @@
                 :class="[item.is_active ? 'show' : '']"
               >
                 {{ item.label }}
-              </a-button>
+              </div>
             </el-col>
             <el-col :span="22" class="right" v-else>
-              <a-button
+              <div
                 class="title"
-                v-for="(item, index) in industryList.slice(0, 11)"
+                v-for="(item, index) in industryList.slice(0, 14)"
                 :key="index"
                 type="link"
                 size="samll"
@@ -87,7 +87,7 @@
                 :class="[item.is_active ? 'show' : '']"
               >
                 {{ item.label }}
-              </a-button>
+              </div>
             </el-col>
             <el-col :span="1" class="button">
               <span v-if="!oneShow" @click="oneShow = true">
@@ -793,7 +793,7 @@ const getUrl = (item) => {
           white-space: nowrap;
           text-overflow: ellipsis;
           font-family: PingFangSC-Medium;
-          font-size: $global-font-size-18 !important;
+          font-size: $global-font-size-20 !important;
         }
 
         .right {
@@ -803,8 +803,9 @@ const getUrl = (item) => {
           .title {
             color: #666;
             font-size: $global-font-size-18;
-            line-height: 15px;
+            line-height: 26px;
             margin: 0 10px;
+            padding: 0 10px;
             display: inline-block;
             overflow: hidden;
             text-decoration: none;

src/views/four/parts/index.vue

@@ -10,13 +10,7 @@
           <el-image class="image" :src="news" fit="fill" />
         </el-col>
         <el-col :span="21" class="right">
-          <el-col
-            :span="12"
-            class="list"
-            v-for="(item, index) in newsList"
-            :key="index"
-            @click="toView(item, '3')"
-          >
+          <el-col :span="12" class="list" v-for="(item, index) in newsList" :key="index" @click="toView(item, '3')">
             <el-col :span="4" class="left">
               <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
               <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
@@ -42,14 +36,7 @@
       </el-col>
       <el-col :span="24" class="one_2">
         <el-col :span="4" class="left">
-          <el-col
-            :span="24"
-            class="list"
-            v-for="(item, index) in typeList"
-            :key="index"
-            @mouseover="mouseOver(item)"
-            :class="[active == item.type ? 'active' : '']"
-          >
+          <el-col :span="24" class="list" v-for="(item, index) in typeList" :key="index" @mouseover="mouseOver(item)" :class="[active == item.type ? 'active' : '']">
             <el-col :span="6" class="image">
               <el-image v-show="active == item.type" class="image" :src="item.icon" fit="fill" />
               <el-image v-show="active != item.type" class="image" :src="item.url" fit="fill" />
@@ -58,17 +45,9 @@
           </el-col>
         </el-col>
         <el-col :span="20" class="right">
-          <el-col
-            :span="7"
-            class="list"
-            v-for="(item, index) in list"
-            :key="index"
-            @click="toView(item, '0')"
-          >
+          <el-col :span="7" class="list" v-for="(item, index) in list" :key="index" @click="toView(item, '0')">
             <el-col :span="24" class="name textOne">{{ item.name || '暂无项目名称' }}</el-col>
-            <el-col :span="24" class="brief textMore">
-              项目介绍：{{ item.brief || '暂无项目介绍' }}
-            </el-col>
+            <el-col :span="24" class="brief textMore"> 项目介绍：{{ item.brief || '暂无项目介绍' }} </el-col>
             <el-col :span="24" class="info">
               <div>技术成熟度：{{ getDict(item.maturity, 'maturity') }}</div>
               <div>合作类型：{{ getDict(item.cooperate, 'cooperate') }}</div>
@@ -94,13 +73,7 @@
           <el-col :span="4" class="title">操作</el-col>
         </el-col>
         <el-col :span="24" class="table_2">
-          <vue3-seamless-scroll
-            :list="exportList"
-            :hover="true"
-            :step="0.5"
-            :wheel="true"
-            :isWatch="true"
-          >
+          <vue3-seamless-scroll :list="exportList" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
             <el-col :span="24" class="list" v-for="(item, index) in exportList" :key="index">
               <el-col :span="2" class="content textOne">
                 <el-tooltip effect="dark" :content="item.name" placement="top">
@@ -136,13 +109,7 @@
         <el-col :span="12" class="right" @click="toMore('3')">查看更多企业</el-col>
       </el-col>
       <el-col :span="24" class="one_4">
-        <el-col
-          :span="24"
-          class="list"
-          v-for="(item, index) in companyList"
-          :key="index"
-          @click="toView(item, '2')"
-        >
+        <el-col :span="24" class="list" v-for="(item, index) in companyList" :key="index" @click="toView(item, '2')">
           <el-col :span="4" class="left">
             <el-image class="image" :src="getUrl(item.logo)" fit="fill">
               <template v-slot:error>
@@ -155,9 +122,7 @@
               <el-tooltip effect="dark" :content="item.name" placement="top">
                 <span class="name">{{ item.name || '暂无名称' }}</span>
               </el-tooltip>
-              <el-tag :type="[item.companyStatus == '0' ? 'success' : 'info']">{{
-                getDict(item.companyStatus, 'status')
-              }}</el-tag>
+              <el-tag :type="[item.companyStatus == '0' ? 'success' : 'info']">{{ getDict(item.companyStatus, 'status') }}</el-tag>
             </el-col>
             <el-col :span="24" class="right_2">
               <el-tag type="primary">{{ getDict(item.pattern, 'pattern') }}</el-tag>
@@ -167,9 +132,7 @@
               <el-col :span="6" class="info">
                 法定代表人：<span>{{ item.representative || '暂无' }}</span>
               </el-col>
-              <el-col :span="6" class="info">
-                成立日期： {{ moment(item.create_time).format('YYYY-MM-DD') }}
-              </el-col>
+              <el-col :span="6" class="info"> 成立日期： {{ moment(item.create_time).format('YYYY-MM-DD') }} </el-col>
               <el-col :span="8" class="info"> 统一社会信用代码：{{ item.code || '暂无' }} </el-col>
             </el-col>
             <el-col :span="24" class="right_3">
@@ -188,20 +151,8 @@
       </el-col>
       <el-col :span="24" class="one_6">
         <el-col :span="10" class="left">
-          <vue3-seamless-scroll
-            :list="achievementList"
-            :hover="true"
-            :step="0.5"
-            :wheel="true"
-            :isWatch="true"
-          >
-            <el-col
-              :span="24"
-              class="list"
-              v-for="(item, index) in achievementList"
-              :key="index"
-              @click="toView(item, '4')"
-            >
+          <vue3-seamless-scroll :list="achievementList" :hover="true" :step="0.5" :wheel="true" :isWatch="true">
+            <el-col :span="24" class="list" v-for="(item, index) in achievementList" :key="index" @click="toView(item, '4')">
               <el-col :span="1">
                 <div class="i"></div>
               </el-col>
@@ -217,12 +168,7 @@
         <el-col :span="14" class="right">
           <el-col :span="24" class="right_1"> <BuildTwoTone /> <span>热门技术领域</span> </el-col>
           <div class="right_2">
-            <div
-              class="list"
-              v-for="(item, index) in fieldList"
-              :key="index"
-              @click="toAchive(item)"
-            >
+            <div class="list" v-for="(item, index) in fieldList" :key="index" @click="toAchive(item)">
               <RocketTwoTone />
               <span class="textOne">{{ item.label }}</span>
             </div>
@@ -591,8 +537,7 @@ const toView = (item, type) => {
   else if (type == '1') router.push({ path: '/expert/detail', query: { id: item.id || item._id } })
   else if (type == '2') router.push({ path: '/company/detail', query: { id: item.id || item._id } })
   else if (type == '3') router.push({ path: '/news/detail', query: { id: item.id || item._id } })
-  else if (type == '4')
-    router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
+  else if (type == '4') router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
 }
 // 查看更多
 const toMore = (type) => {
@@ -900,8 +845,8 @@ const removeHtmlStyle = (html) => {
             }
           }
           .right_2 {
-            grid-gap: 0.5rem;
-            gap: 0.5rem;
+            grid-gap: 10px;
+            gap: 10px;
             display: flex;
             margin: 10px 0;
           }

src/views/login/parts/login.vue

@@ -180,6 +180,7 @@ const toRegister = () => {
         span:last-child {
           color: $global-color-107;
           margin: 0 0 0 2px;
+          cursor: default; /* 将鼠标样式更改为箭头 */
         }
       }
     }

src/views/login/parts/register.vue

@@ -228,6 +228,7 @@ const toLogin = () => {
       span:last-child {
         color: $global-color-107;
         margin: 0 0 0 2px;
+        cursor: default; /* 将鼠标样式更改为箭头 */
       }
     }
   }

src/views/thirteen/index.vue

@@ -80,7 +80,7 @@
               <el-row class="right">
                 <el-col :span="24" class="right_1">
                   <el-image class="image" :src="journal6" fit="fill" />
-                  <div class="text" style="height: 34px">
+                  <div class="text">
                     <h5 class="title" style="padding-top: 0px">“他山之石”</h5>
                   </div>
                 </el-col>
@@ -483,8 +483,6 @@ const toView = async (item) => {
             left: 0;
             bottom: 5px;
             width: 100%;
-            height: 34px;
-            line-height: 34px;
             padding: 0 8px;
             background-color: rgba(0, 0, 0, 0.6);
             background-image: none;

src/views/thr/index.vue

@@ -70,9 +70,9 @@ const plateList = ref([
   { label: '精细化工及天然气化工', value: '1' },
   { label: '农产品加工及绿色食品', value: '2' },
   { label: '光电子及智能传感器', value: '3' },
+  { label: '生物基新材料', value: '6' },
   { label: '车规级芯片及功率半导体器件', value: '4' },
   { label: '新能源及动力电池', value: '5' },
-  { label: '生物基新材料', value: '6' },
   { label: '人工智能及智能机器人', value: '7' },
   { label: '碳纤维及复合材料', value: '8' },
   { label: '遥感卫星及航天航空技术', value: '9' },

src/views/two/parts/demand.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demand">
-    <el-form ref="DemandRules" :model="form" :rules="rules" label-width="120px" class="form">
+    <el-form ref="DemandRules" :model="form" :rules="rules" class="form">
       <el-form-item label="需求名称" prop="name">
         <el-input size="large" clearable v-model="form.name" placeholder="请输入需求名称">
         </el-input>

src/views/two/parts/supply.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="supply">
-    <el-form ref="SupplyRules" :model="form" :rules="rules" label-width="120px" class="form">
+    <el-form ref="SupplyRules" :model="form" :rules="rules" class="form">
       <el-form-item label="供应名称" prop="name">
         <el-input size="large" clearable v-model="form.name" placeholder="请输入供应名称">
         </el-input>
@@ -96,13 +96,7 @@
         </el-col>
       </el-row>
       <el-form-item label="简介" prop="brief">
-        <el-input
-          size="large"
-          v-model="form.brief"
-          :autosize="{ minRows: 2, maxRows: 8 }"
-          type="textarea"
-          placeholder="请输入简介"
-        />
+        <el-input size="large" v-model="form.brief" type="textarea" placeholder="请输入简介" />
       </el-form-item>
       <el-col :span="24" class="button">
         <el-button type="primary" @click="submitForm(DemandRules)">发布</el-button>

vite.config.js

@@ -59,11 +59,11 @@ export default defineConfig(({ mode }) => {
       loaderOptions: {
         less: {
           javascriptEnabled: true
-        },
-        postcss: {
-          plugins: [postcss]
         }
       },
+      // postcss: {
+      //   plugins: [postcss]
+      // },
       // CSS 预处理器
       preprocessorOptions: {
         // 定义全局 SCSS 变量