修改

src/assets/main.css

@@ -12,7 +12,7 @@ p {
   padding: 0;
 }
 
-.textOver {
+.textOne {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/components/custom/custom-layout.vue

@@ -172,6 +172,7 @@ const handleMouseLeave = (index) => {
         padding: 10px 0 0 0;
         font-size: $global-font-size-20;
         color: $global-color-107;
+        cursor: pointer; /* 改变鼠标样式为手形 */
         span {
           margin: 0 10px;
         }
@@ -185,7 +186,7 @@ const handleMouseLeave = (index) => {
           text-align: center;
           width: 145px;
           height: 58px;
-          padding: 10px 0;
+          line-height: 58px;
           font-family: Microsoft YaHei;
           font-size: $global-font-size-24;
           color: #333333;
@@ -255,6 +256,7 @@ const handleMouseLeave = (index) => {
     }
   }
   .main {
+    min-height: 61vh;
   }
   .footer {
     padding: 0 5px 10px 5px;

src/views/eight/index.vue

@@ -1,25 +1,201 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <el-col :span="24" class="one">
+      <el-image class="image" :src="jiqun" fit="fill" />
+    </el-col>
+    <el-col :span="24" class="two">
+      <div class="w_1200">
+        <el-row class="two_1" :gutter="20">
+          <el-col :span="6" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            <el-row class="list">
+              <el-image class="image" :src="item.url" fit="fill" />
+              <el-col :span="24" class="other">
+                <el-col :span="24" class="title textOver">{{ item.label }}</el-col>
+                <el-col :span="24" class="friend">合作伙伴</el-col>
+                <el-col
+                  :span="24"
+                  class="other_1"
+                  v-for="(tag, indexx) in item.partner"
+                  :key="indexx"
+                  >{{ tag }}</el-col
+                >
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </el-col>
+  </custom-layout>
 </template>
 
 <script setup>
+// 图片引入
+import jiqun from '/images/jiqun.png'
+import eight1 from '/images/rcjs-1.png'
+import eight2 from '/images/rcjs-2.png'
+import eight3 from '/images/rcjs-3.png'
+import eight4 from '/images/rcjs-4.png'
+import eight5 from '/images/rcjs-5.png'
+import eight6 from '/images/rcjs-6.png'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
-// 加载中
-const loading = ref(false)
 // 路由
 const router = useRouter()
+
+// 加载中
+const loading = ref(false)
+const list = ref([
+  {
+    id: '1',
+    label: '人工智能及智能机器人',
+    value: '0',
+    url: eight1,
+    brief: '简介',
+    partner: ['博立', '吉大', '科大讯飞']
+  },
+  {
+    id: '1',
+    label: '精细化工及天然气化工',
+    value: '1',
+    url: eight2,
+    brief: '简介',
+    partner: ['吉化星云']
+  },
+  {
+    id: '1',
+    label: '新能源及动力电池',
+    value: '2',
+    url: eight3,
+    brief: '简介',
+    partner: ['东北师范大学']
+  },
+  {
+    id: '1',
+    label: '精密仪器及先进设备',
+    value: '3',
+    url: eight4,
+    brief: '简介',
+    partner: []
+  },
+  {
+    id: '1',
+    label: '生物基新材料',
+    value: '4',
+    url: eight4,
+    partner: [],
+    brief: '简介'
+  },
+  {
+    id: '1',
+    label: '生物医药及先进医疗器械',
+    value: '5',
+    url: eight3,
+    brief: '简介',
+    partner: ['净月区苏州医工所']
+  },
+  {
+    id: '1',
+    label: '农产品加工及绿色食品',
+    value: '6',
+    url: eight2,
+    brief: '简介',
+    partner: ['绿色食品研究院']
+  },
+  {
+    id: '1',
+    label: '碳纤维及复合材料',
+    value: '7',
+    url: eight1,
+    brief: '简介',
+    partner: ['吉林化纤', '国兴碳纤']
+  },
+  {
+    id: '1',
+    label: '车规级芯片及功率半导体器件',
+    value: '8',
+    url: eight2,
+    brief: '简介',
+    partner: ['华为', '一汽']
+  },
+  {
+    id: '1',
+    label: '光电子及智能传感器',
+    value: '9',
+    url: eight3,
+    brief: '简介',
+    partner: ['长春光机所', '光电信息产业园']
+  },
+  {
+    id: '1',
+    label: '遥感卫星及航天航空',
+    value: '10',
+    url: eight4,
+    brief: '简介',
+    partner: ['卫星研究院', '卫星研究院', '长春理工', '长光卫星']
+  },
+  {
+    id: '1',
+    label: '氢能及储能',
+    value: '12',
+    url: eight5,
+    brief: '简介',
+    partner: ['氢能产研院', '长春应化所']
+  },
+  {
+    id: '1',
+    label: '汽车电子及新型汽车零部件',
+    value: '13',
+    url: eight6,
+    brief: '简介',
+    partner: ['富赛', '旗智', '富奥']
+  }
+])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await search()
+  loading.value = false
+})
+const search = async () => {}
+// 查看详情
+const toView = async (item) => {
+  router.push({ path: '/industry/detail', query: { id: item.id || item._id } })
+}
 </script>
 <style scoped lang="scss">
 .main {
+  .one {
+    .image {
+      width: 100%;
+      height: 350px;
+    }
+  }
+  .two {
+    margin: 10px 0;
+    .two_1 {
+      .list {
+        .image {
+          width: 100%;
+          position: relative;
+        }
+        .other {
+          position: absolute;
+          width: 80%;
+          top: 70px;
+          left: 30px;
+          color: $global-color-fff;
+          font-size: $global-font-size-22;
+          text-align: center;
+          .friend {
+            margin: 20px 0;
+          }
+          .other_1 {
+            margin: 5px 0 0 0;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/views/eleven/index.vue

@@ -1,19 +1,15 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <elevenHatch></elevenHatch>
+  </custom-layout>
 </template>
 
 <script setup>
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
+// 组件
+import elevenHatch from '@/views/elevenHatch/index.vue'
 // 加载中
 const loading = ref(false)
 // 路由

src/views/elevenHatch/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="main">
+    <el-row>
+      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
+        <div class="head">
+          <div class="head_1">孵化器管理驾驶舱</div>
+          <div class="head_2" id="showTime">{{ formattedTime }}</div>
+        </div>
+        <div class="center">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <div class="center_1">
+                <div class="boxall">
+                  <div class="alltitle">孵化进度</div>
+                  <echarts3></echarts3>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">孵化项目列表</div>
+                  <div class="wraptit">
+                    <span>项目名称</span><span>金额</span><span>风险概率</span><span>时间</span>
+                  </div>
+                  <div class="one">
+                    <vue3-seamless-scroll
+                      :list="oneList"
+                      :hover="true"
+                      :step="0.2"
+                      :wheel="true"
+                      :isWatch="true"
+                      class="scroll"
+                    >
+                      <div class="wrap" v-for="(item, index) in oneList" :key="index">
+                        <div class="other">{{ item.name }}</div>
+                        <div class="other">{{ item.money }}</div>
+                        <div class="other">{{ item.number }}</div>
+                        <div class="other">{{ item.time }}</div>
+                      </div>
+                    </vue3-seamless-scroll>
+                  </div>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">行业领域占比情况</div>
+                  <echarts1></echarts1>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="center_1">
+                <div class="boxall" style="height: 170px">
+                  <div class="clearfix navboxall" style="height: 100%">
+                    <div class="pulll_left num">
+                      <div class="numbt">总体情况<span>(单位：家)</span></div>
+                      <div class="numtxt">190</div>
+                    </div>
+                    <div class="pulll_right zhibiao">
+                      <div class="zb1">
+                        <span>工研院运营</span>
+                        <echarts5></echarts5>
+                      </div>
+                      <div class="zb2">
+                        <span>参股孵化器</span>
+                        <echarts6></echarts6>
+                      </div>
+                      <div class="zb3">
+                        <span>合作孵化器</span>
+                        <echarts7></echarts7>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">年度项目完成对比</div>
+                  <echarts2></echarts2>
+                </div>
+                <div class="boxall">
+                  <div class="alltitle">投资收益对比</div>
+                  <echarts4></echarts4>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="center_1">
+                <div class="boxall">
+                  <div class="alltitle">视频监控</div>
+                  <div v-for="(item, index) in twoList" :key="index">
+                    <el-image class="image" :src="item.url" fit="fill" />
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import echarts1 from './path/echarts1.vue'
+import echarts2 from './path/echarts2.vue'
+import echarts3 from './path/echarts3.vue'
+import echarts4 from './path/echarts4.vue'
+import echarts5 from './path/echarts5.vue'
+import echarts6 from './path/echarts6.vue'
+import echarts7 from './path/echarts7.vue'
+// 加载中
+const loading = ref(false)
+// 时间
+const formattedTime = ref('')
+const oneList = ref([
+  { name: '鱿鱼卤制品的研究', money: '110万', number: '10%', time: '2023-4-22' },
+  { name: '一种快速装置自净系统', money: '190万', number: '20%', time: '2023-6-15' },
+  { name: '玻璃表面清洁技术', money: '90万', number: '33%', time: '2023-5-30' },
+  { name: '网上信息安全处理', money: '180万', number: '14%', time: '2023-7-12' },
+  { name: '视觉检测', money: '119万', number: '10%', time: '2023-5-14' },
+  { name: '无纺布气味去除', money: '120万', number: '20%', time: '2023-6-15' },
+  { name: '功能性色母开发', money: '160万', number: '10%', time: '2023-5-30' }
+])
+import video_1 from '/images/video_1.jpg'
+import video_2 from '/images/video_2.jpg'
+import video_3 from '/images/video_3.jpg'
+import video_4 from '/images/video_4.jpg'
+const twoList = ref([{ url: video_1 }, { url: video_2 }, { url: video_3 }, { url: video_4 }])
+
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await updateTime()
+  loading.value = false
+})
+// 创建一个函数来格式化时间并更新状态
+const updateTime = () => {
+  const now = new Date()
+  const options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }
+  formattedTime.value = now.toLocaleString('zh-CN', options)
+}
+
+const timer = setInterval(updateTime, 1000)
+
+onMounted(() => {
+  timer // 开始计时器
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timer) // 组件卸载前清除计时器
+})
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  position: relative;
+  background: url('./images/bg.jpg');
+  background-size: 100% 100%;
+  padding: 0px;
+  margin: 0px;
+  color: #222;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  @font-face {
+    font-family: electronicFont;
+    src: url(./font/DS-DIGIT.TTF);
+  }
+  a:hover {
+    color: #06c;
+    text-decoration: none !important;
+  }
+  .head {
+    position: relative;
+    height: 4rem;
+    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;
+    }
+    .head_2 {
+      position: absolute;
+      right: 1rem;
+      top: 0.2rem;
+      line-height: 1.5rem;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 1.5rem;
+      padding-right: 0.5rem;
+      font-family: electronicFont;
+    }
+  }
+  .center {
+    margin: 0 10px;
+    .center_1 {
+      .navboxall {
+        height: calc(100% - 30px);
+      }
+      .boxall {
+        padding: 15px;
+        background: rgba(0, 0, 0, 0.2);
+        position: relative;
+        margin-bottom: 10px;
+        z-index: 10;
+      }
+
+      .alltitle {
+        font-size: $global-font-size-20;
+        color: #fff;
+        position: relative;
+        padding-left: 12px;
+        margin-bottom: 10px;
+      }
+
+      .alltitle:before {
+        width: 5px;
+        height: 20px;
+        top: 2px;
+        position: absolute;
+        content: '';
+        background: #49bcf7;
+        border-radius: 20px;
+        left: 0;
+      }
+      .image {
+        width: 100%;
+        height: 185px;
+      }
+      .wraptit span {
+        display: inline-block;
+        font-size: $global-font-size-18;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .wraptit {
+        text-align: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 0 0 10px 0;
+        margin-bottom: 10px;
+      }
+      .wraptit span:nth-child(1) {
+        width: 30%;
+      }
+
+      .wraptit span:nth-child(2) {
+        width: 20%;
+      }
+
+      .wraptit span:nth-child(3) {
+        width: 30%;
+      }
+
+      .wraptit span:nth-child(4) {
+        width: 20%;
+      }
+
+      .clearfix {
+        display: flex;
+        align-items: center;
+      }
+      .num,
+      .zhibiao {
+        height: 100%;
+        width: 50%;
+      }
+
+      .zb1,
+      .zb2,
+      .zb3 {
+        float: left;
+        width: 33.3333%;
+        height: 100%;
+      }
+
+      #zb1,
+      #zb2,
+      #zb3 {
+        height: calc(100% - 30px);
+      }
+
+      .zhibiao span {
+        padding-top: 20px;
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: $global-font-size-18;
+      }
+
+      .num {
+        padding-right: 20px;
+      }
+
+      .numbt {
+        font-size: $global-font-size-26;
+        color: #fff;
+        padding-top: 14px;
+      }
+
+      .numbt span {
+        font-size: $global-font-size-20;
+        padding-left: 10px;
+        color: #fff;
+      }
+
+      .numtxt {
+        color: #fef000;
+        font-size: 40px;
+        font-family: arial;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 10px 0;
+        margin: 18px 0;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+      .one {
+        height: 5rem;
+        overflow: hidden;
+        .scroll {
+          width: 100%;
+          .wrap {
+            display: flex;
+            justify-content: space-between;
+            border: 1px solid rgba(25, 186, 139, 0.17);
+            padding: 0.2rem;
+            margin: 0 0 0.5rem 0;
+            .other:first-child {
+              width: 40%;
+            }
+            .other {
+              width: 30%;
+              color: rgba(255, 255, 255, 0.6);
+              text-align: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              font-size: 0.8rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/elevenHatch/path/echarts1.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 250px;
+  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: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 160,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 12
+      },
+      orient: 'vertical',
+      data: ['制造业', '服务业', '农业', '金融行业', '电子商务行业']
+    },
+    calculable: true,
+    series: [
+      {
+        name: ' ',
+        color: [
+          '#62c98d',
+          '#2f89cf',
+          '#4cb9cf',
+          '#53b666',
+          '#62c98d',
+          '#205acf',
+          '#c9c862',
+          '#c98b62',
+          '#c962b9',
+          '#7562c9',
+          '#c96262',
+          '#c25775',
+          '#00b7be'
+        ],
+        type: 'pie',
+        radius: [30, 70],
+        center: ['35%', '50%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: [
+          {
+            value: 10,
+            name: '制造业'
+          },
+          {
+            value: 5,
+            name: '服务业'
+          },
+          {
+            value: 15,
+            name: '农业'
+          },
+          {
+            value: 25,
+            name: '金融行业'
+          },
+          {
+            value: 20,
+            name: '电子商务行业'
+          }
+        ]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/elevenHatch/path/echarts2.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div ref="echarts2" class="echarts2" style="height: 260px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  drawEcharts2()
+})
+function drawEcharts2() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    },
+    legend: {
+      data: [
+        {
+          name: '省重点'
+        },
+        {
+          name: '市重点'
+        },
+        {
+          name: '完成率'
+        }
+      ],
+      top: '0%',
+      textStyle: {
+        color: 'rgba(255,255,255,0.9)'
+      }
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月'
+        ],
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '14'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '金额',
+        min: 0,
+        max: 50,
+        interval: 10,
+        axisLabel: {
+          show: true
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.4)'
+          }
+        }
+      },
+      {
+        type: 'value',
+        name: '完成率',
+        show: true,
+        axisLabel: {
+          show: true
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.4)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#001e94'
+          }
+        }
+      }
+    ],
+    grid: {
+      top: '20%',
+      right: '30',
+      bottom: '30',
+      left: '30'
+    },
+    series: [
+      {
+        name: '省重点',
+        type: 'bar',
+        data: [4, 6, 36, 6, 8, 6, 4, 6, 30, 6, 8, 12],
+        barWidth: 'auto',
+        itemStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#609db8'
+                },
+                {
+                  offset: 1,
+                  color: '#609db8'
+                }
+              ],
+              globalCoord: false
+            }
+          }
+        }
+      },
+      {
+        name: '市重点',
+        type: 'bar',
+        data: [4, 2, 34, 6, 8, 6, 4, 2, 32, 6, 8, 18],
+        barWidth: 'auto',
+        itemStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#66b8a7'
+                },
+                {
+                  offset: 1,
+                  color: '#66b8a7'
+                }
+              ],
+              globalCoord: false
+            }
+          }
+        },
+        barGap: '0'
+      },
+      {
+        name: '完成率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20],
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#cdba00'
+          }
+        },
+        smooth: true
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+}
+</script>

src/views/elevenHatch/path/echarts3.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div ref="echarts3" class="echarts3" style="height: 240px; width: 100%"></div>
+  </div>
+</template>
+<style scoped lang="scss"></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+onMounted(() => {
+  echarts3View()
+})
+function echarts3View() {
+  var myChart3 = echarts.init(echarts3.value)
+  var option3 = {
+    tooltip: {
+      show: false
+    },
+    grid: {
+      top: '0%',
+      left: '90',
+      right: '14%',
+      bottom: '0%'
+    },
+    xAxis: {
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      axisLabel: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 14,
+        width: 85, //将内容的宽度固定
+        overflow: 'truncate', //超出的部分截断
+        ellipsis: '...' //截断的部分用...代替
+      },
+      data: [
+        '鱿鱼卤制品的研究',
+        '一种快速装置自净系统',
+        '玻璃表面清洁技术',
+        '网上信息安全处理',
+        '视觉检测',
+        '无纺布气味去除',
+        '功能性色母开发'
+      ],
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        label: {
+          show: true,
+          zlevel: 10000,
+          position: 'right',
+          padding: 10,
+          color: '#49bcf7',
+          fontSize: 14,
+          formatter: '{c}%'
+        },
+        itemStyle: {
+          color: '#49bcf7'
+        },
+        barWidth: '15',
+        data: [49, 80, 67, 99, 12, 19, 39, 84],
+        z: 10
+      },
+      {
+        type: 'bar',
+        barGap: '-100%',
+        itemStyle: {
+          color: '#fff',
+          opacity: 0.1
+        },
+        barWidth: '15',
+        data: [100, 100, 100, 100, 100, 100, 100, 100],
+        z: 5
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/elevenHatch/path/echarts4.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div ref="echarts4" class="echarts4" style="height: 242px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+onMounted(() => {
+  drawEcharts4()
+})
+function drawEcharts4() {
+  var myChart4 = echarts.init(echarts4.value)
+  var option4 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    },
+    legend: {
+      data: ['销售额', '利润'],
+      top: '0',
+      textStyle: {
+        color: '#fff'
+      },
+      itemGap: 20
+    },
+    grid: {
+      left: '0',
+      right: '20',
+      top: '10',
+      bottom: '20',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月'
+        ]
+      },
+      {}
+    ],
+    yAxis: [
+      {
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: '销售额',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 163, 64, 0.3)'
+                },
+                {
+                  offset: 0.8,
+                  color: 'rgba(24, 163, 64, 0)'
+                }
+              ],
+              false
+            ),
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 10
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#cdba00',
+            borderColor: 'rgba(137,189,2,0.27)',
+            borderWidth: 12
+          }
+        },
+        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+      },
+      {
+        name: '利润',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(39, 122,206, 0.3)'
+                },
+                {
+                  offset: 0.8,
+                  color: 'rgba(39, 122,206, 0)'
+                }
+              ],
+              false
+            ),
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 10
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#277ace',
+            borderColor: 'rgba(0,136,212,0.2)',
+            borderWidth: 12
+          }
+        },
+        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+}
+</script>

src/views/elevenHatch/path/echarts5.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div ref="echarts5" class="echarts5" style="height: 110px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts5 = ref()
+onMounted(() => {
+  drawEcharts5()
+})
+function drawEcharts5() {
+  var myChart5 = echarts.init(echarts5.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option5 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#49bcf7',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: c + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((c / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart5.setOption(option5)
+}
+</script>

src/views/elevenHatch/path/echarts6.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div ref="echarts6" class="echarts6" style="height: 110px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts6 = ref()
+onMounted(() => {
+  drawEcharts6()
+})
+function drawEcharts6() {
+  var myChart6 = echarts.init(echarts6.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option6 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#cdba00',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: b + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((b / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart6.setOption(option6)
+}
+</script>

src/views/elevenHatch/path/echarts7.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div ref="echarts7" class="echarts7" style="height: 110px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts7 = ref()
+onMounted(() => {
+  drawEcharts7()
+})
+function drawEcharts7() {
+  var myChart7 = echarts.init(echarts7.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option7 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#62c98d',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: c + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((c / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart7.setOption(option7)
+}
+</script>

src/views/four/index.vue

@@ -1,25 +1,102 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout v-loading="loading">
+    <el-col :span="24" class="one">
+      <!-- <el-image class="image" :src="news" fit="fill" /> -->
+      <div class="input">
+        <a-tabs v-model:activeKey="activeKey" centered>
+          <a-tab-pane key="1" tab="全部"> </a-tab-pane>
+          <a-tab-pane key="2" tab="找专家"> </a-tab-pane>
+          <a-tab-pane key="3" tab="找资源"> </a-tab-pane>
+          <a-tab-pane key="4" tab="找需求"> </a-tab-pane>
+          <a-tab-pane key="5" tab="更多+"> </a-tab-pane>
+        </a-tabs>
+        <a-input-search
+          v-model:value="searchValue"
+          placeholder="请输入想要搜索的内容"
+          enter-button="搜索"
+          size="large"
+          @search="onSearch"
+        />
+        <div class="hot">
+          <div class="hot_1">热门搜索：</div>
+          <div class="hot_2">
+            <span>商贸</span>
+            <span>红旗</span>
+            <span>有机发光器件</span>
+            <span>车载显示屏</span>
+            <span>政府质量奖</span>
+            <span>科技</span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24" class="two">
+      <index></index>
+    </el-col>
+  </custom-layout>
 </template>
 
 <script setup>
-import { UserStore } from '@/store/user'
-const userStore = UserStore()
-const user = computed(() => userStore.user)
+// 组件
+// import expert from '@/views/expert/index.vue'
+// import demand from '@/views/demand/index.vue'
+import index from './parts/index.vue'
 // 加载中
 const loading = ref(false)
-// 路由
-const router = useRouter()
+const activeKey = ref('1')
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await search()
+  loading.value = false
+})
+const search = async () => {}
 </script>
 <style scoped lang="scss">
 .main {
+  .one {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 200px;
+    background: url(/images/bg.png);
+    background-size: 100% 100%;
+
+    .input {
+      width: 830px;
+      .hot {
+        display: flex;
+        margin: 10px 0 0 0;
+        padding: 10px;
+        .hot_1 {
+          font-size: $global-font-size-18;
+          font-family:
+            PingFangSC-Regular,
+            PingFang SC;
+          font-weight: 400;
+        }
+        .hot_2 {
+          span {
+            margin: 0 10px;
+            font-size: $global-font-size-18;
+            font-family:
+              PingFangSC-Regular,
+              PingFang SC;
+            font-weight: 400;
+            color: #666;
+            line-height: $global-font-size-18;
+            cursor: pointer;
+          }
+          span:hover {
+            color: #1989fa;
+          }
+        }
+      }
+      :deep(.ant-tabs .ant-tabs-tab) {
+        font-size: $global-font-size-18 !important;
+      }
+    }
+  }
 }
 </style>

src/views/nine/index.vue

@@ -1,25 +1,428 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <el-col :span="24" class="one">
+      <el-image class="image" :src="chengguo" fit="fill" />
+    </el-col>
+    <div class="w_1300">
+      <div class="two">
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>行业</span>
+          </div>
+          <div v-if="!oneShow" class="twoRight">
+            <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+          <div v-else class="twoRight">
+            <div class="label" v-for="(item, index) in plateList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+          <div class="button">
+            <span v-if="!oneShow" @click="oneShow = true">
+              <el-icon><ArrowDown /></el-icon>
+            </span>
+            <span v-else @click="oneShow = false">
+              <el-icon><ArrowUp /></el-icon>
+            </span>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>技术领域</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in typeList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>成熟度</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in matureList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>出让方式</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in sellList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>价格</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in moneyList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>所在地</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in cityList.slice(0, 15)" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="thr">
+        <div class="list" v-for="(item, index) in list" :key="index">
+          <div class="list_1">
+            <el-image class="image" :src="file[index]" fit="fill" />
+            <div class="box">
+              <p class="name textMore">{{ item.name || '暂无' }}</p>
+            </div>
+            <div class="list_2">
+              <div class="other">
+                <el-image class="image" :src="one" fit="fill" />
+                <div class="text">{{ item.technology || '暂无' }}</div>
+              </div>
+              <div class="other">
+                <el-image class="image" :src="two" fit="fill" />
+                <div class="text">{{ item.type || '暂无' }}</div>
+              </div>
+              <div class="other">
+                <el-image class="image" :src="thr" fit="fill" />
+                <div class="text">{{ item.sell || '暂无' }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="four">
+        <el-pagination background layout="prev, pager, next" :total="1000" />
+      </div>
+    </div>
+  </custom-layout>
 </template>
 
 <script setup>
+// 图片引入
+import chengguo from '/images/chengguo.png'
+import bg_1 from '/images/achievement/tec_bg_1.png'
+import bg_2 from '/images/achievement/tec_bg_2.png'
+import bg_3 from '/images/achievement/tec_bg_3.png'
+import bg_4 from '/images/achievement/tec_bg_4.png'
+import bg_5 from '/images/achievement/tec_bg_6.png'
+import bg_6 from '/images/achievement/tec_bg_8.png'
+import bg_7 from '/images/achievement/tec_bg_9.png'
+import bg_8 from '/images/achievement/tec_bg_10.png'
+import bg_9 from '/images/achievement/tec_bg_7.png'
+import one from '/images/achievement/bg-cgyx-list-icon1.png'
+import two from '/images/achievement/bg-cgyx-list-icon2.png'
+import thr from '/images/achievement/bg-cgyx-list-icon3.png'
+import { getCity } from '@/utils/city'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
-// 加载中
-const loading = ref(false)
+const $checkRes = inject('$checkRes')
+// 接口
+import { AchievementStore } from '@/store/api/platform/achievement'
+import { DictDataStore } from '@/store/api/system/dictData'
+const store = AchievementStore()
+const dictDataStore = DictDataStore()
 // 路由
 const router = useRouter()
+
+// 加载中
+const loading = ref(false)
+const file = ref([bg_1, bg_2, bg_3, bg_4, bg_5, bg_6, bg_7, bg_8, bg_9, bg_1, bg_2, bg_3])
+const list = ref([
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '深地工程综合无损检测关键技术与装备',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  },
+  {
+    name: '合成气乙醇发酵与应用',
+    technology: '工业废水处理与资源化技术',
+    type: '废弃资源综合利用业',
+    sell: '普通许可,合作开发'
+  }
+])
+// 是否展开
+const oneShow = ref(false)
+// 字典表
+const fieldList = ref([])
+const moneyList = ref([])
+const matureList = ref([])
+const sellList = ref([])
+const technologyList = ref([])
+const cityList = ref([])
+const typeList = ref([
+  { label: '不限', value: '-1' },
+  { label: '教育休闲', value: '0' },
+  { label: '包装印刷', value: '1' },
+  { label: '电气自动化', value: '2' },
+  { label: '采矿冶金', value: '3' },
+  { label: '航空航天', value: '4' },
+  { label: '海洋开发', value: '5' },
+  { label: '衣林牧业', value: '6' },
+  { label: '医药与医疗', value: '7' },
+  { label: '电子信息', value: '8' }
+])
+const plateList = ref([
+  { label: '不限', value: '-1' },
+  { label: '汽车电子及新型汽车零部件', value: '0' },
+  { label: '精细化工及天然气化工', value: '1' },
+  { label: '农产品加工及绿色食品', value: '2' },
+  { label: '光电子及智能传感器', value: '3' },
+  { label: '车规级芯片及功率半导体器件', value: '4' },
+  { label: '新能源及动力电池', value: '5' },
+  { label: '生物基新材料', value: '6' },
+  { label: '人工智能及智能机器人', value: '7' },
+  { label: '碳纤维及复合材料', value: '8' },
+  { label: '遥感卫星及航天航空技术', value: '9' },
+  { label: '精密仪器及先进装备', value: '10' },
+  { label: '生物医药及先进医疗器械', value: '11' }
+])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await searchOther()
+
+  await search()
+  loading.value = false
+})
+const search = async () => {}
+const searchOther = async () => {
+  let result
+  // 技术领域
+  result = await dictDataStore.query({ code: 'field', is_use: '0' })
+  if ($checkRes(result)) fieldList.value = result.data
+  // 成熟度
+  result = await dictDataStore.query({ code: 'mature', is_use: '0' })
+  if ($checkRes(result)) matureList.value = result.data
+  // 出让方式
+  result = await dictDataStore.query({ code: 'sell', is_use: '0' })
+  if ($checkRes(result)) sellList.value = result.data
+  // 技术分类
+  result = await dictDataStore.query({ code: 'technology', is_use: '0' })
+  if ($checkRes(result)) technologyList.value = result.data
+  // 价格
+  result = await dictDataStore.query({ code: 'money', is_use: '0' })
+  if ($checkRes(result)) moneyList.value = result.data
+  matureList.value.unshift({ value: '-1', label: '不限' })
+  sellList.value.unshift({ value: '-1', label: '不限' })
+  // 城市
+  getCity().then(
+    (response) => (cityList.value = [{ label: '不限', value: '-1' }, ...response.address])
+  )
+}
+// 查看详情
+const toView = async (item) => {
+  router.push({ path: '/industry/detail', query: { id: item.id || item._id } })
+}
 </script>
 <style scoped lang="scss">
 .main {
+  .w_1300 {
+    margin: 0 auto;
+    width: 1300px;
+  }
+  .one {
+    .image {
+      width: 100%;
+      height: 350px;
+    }
+  }
+  .two {
+    margin: 10px 0;
+    background-color: $global-color-fff;
+    .twoSeacher {
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+      position: relative;
+      border: solid 1px #e5e5e5;
+      border-bottom: 0;
+      font-size: $global-font-size-18;
+      color: #666;
+      min-height: 60px;
+      overflow: hidden;
+      .twoLeft {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        width: 110px;
+        text-align: center;
+        color: #000;
+        font-weight: bold;
+        background-color: #fafafa;
+      }
+      .twoRight {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 12px;
+        flex: 1;
+        border-left: solid 1px #e5e5e5;
+        background-color: #fff;
+        .label {
+          color: #313131;
+          margin-bottom: 10px;
+          padding: 8px 10px;
+          border-radius: 3px;
+          background-color: #fff;
+          border: solid 1px transparent;
+          cursor: pointer;
+        }
+        .label:first-child {
+          color: #0a58c2;
+          border: solid 1px #006dd2;
+        }
+      }
+      .button {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .twoSeacher:last-child {
+      border: solid 1px #e5e5e5;
+      border-bottom: 1 !important;
+    }
+  }
+  .thr {
+    margin: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .list {
+      margin-right: 10px;
+      margin-bottom: 15px;
+      padding-top: 3px;
+      width: 317px;
+      height: 325px;
+      background-color: #fff;
+      box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.3);
+      .list_1 {
+        position: relative;
+
+        .image {
+          height: 100%;
+          width: 100%;
+        }
+        .box {
+          display: flex !important;
+          align-items: center;
+          position: absolute;
+          top: 45px;
+          left: 0;
+          padding: 15px 10px;
+          width: 100%;
+          height: 82px;
+          background-color: rgba(0, 25, 79, 0.5);
+          font-size: $global-font-size-18;
+          line-height: 24px;
+          color: #fff;
+        }
+      }
+      .list_2 {
+        margin: 10px 13px 0;
+        .other {
+          display: flex;
+          align-items: center;
+          margin: 0 0 5px 0;
+          .image {
+            width: 25px;
+            height: 25px;
+            margin: 0 5px 0 0;
+          }
+          .text {
+            font-size: $global-font-size-16;
+            line-height: 32px;
+            color: #404040;
+          }
+        }
+      }
+    }
+    .list:nth-child(4n) {
+      margin-right: 0;
+    }
+    .list:hover {
+      box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.8);
+    }
+  }
+  .four {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+  }
 }
 </style>

src/views/seven/index.vue

@@ -1,16 +1,81 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <el-col :span="24" class="one">
+      <el-image class="image" :src="lists" fit="fill" />
+    </el-col>
+    <div class="w_1300">
+      <div class="two">
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>行业</span>
+          </div>
+          <div v-if="!oneShow" class="twoRight">
+            <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+          <div v-else class="twoRight">
+            <div class="label" v-for="(item, index) in plateList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+          <div class="button">
+            <span v-if="!oneShow" @click="oneShow = true">
+              <el-icon><ArrowDown /></el-icon>
+            </span>
+            <span v-else @click="oneShow = false">
+              <el-icon><ArrowUp /></el-icon>
+            </span>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>技术领域</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in typeList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>所在地</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in cityList.slice(0, 15)" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="twoTwo">
+        <div class="twoTable">
+          <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="twoValue">
+          <div class="value" v-for="(item, index) in list" :key="index">
+            <div class="table-colunm table-colunm1">{{ item.key || '暂无' }}</div>
+            <div class="table-colunm table-colunm2">{{ item.name || '暂无' }}</div>
+            <div class="table-colunm">{{ item.field || '暂无' }}</div>
+            <div class="table-colunm">{{ item.time || '暂无' }}</div>
+            <div class="table-colunm">查看详情</div>
+          </div>
+        </div>
+        <div class="twoTotal">
+          <el-pagination background layout="prev, pager, next" :total="1000" />
+        </div>
+      </div>
+    </div>
+  </custom-layout>
 </template>
 
 <script setup>
+// 图片引入
+import lists from '/images/bg-xqk.jpg'
+import { getCity } from '@/utils/city'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
@@ -18,8 +83,210 @@ const user = computed(() => userStore.user)
 const loading = ref(false)
 // 路由
 const router = useRouter()
+// 是否展开
+const oneShow = ref(false)
+const cityList = ref([])
+const typeList = ref([
+  { label: '不限', value: '-1' },
+  { label: '教育休闲', value: '0' },
+  { label: '包装印刷', value: '1' },
+  { label: '电气自动化', value: '2' },
+  { label: '采矿冶金', value: '3' },
+  { label: '航空航天', value: '4' },
+  { label: '海洋开发', value: '5' },
+  { label: '衣林牧业', value: '6' },
+  { label: '医药与医疗', value: '7' },
+  { label: '电子信息', value: '8' }
+])
+const plateList = ref([
+  { label: '不限', value: '-1' },
+  { label: '汽车电子及新型汽车零部件', value: '0' },
+  { label: '精细化工及天然气化工', value: '1' },
+  { label: '农产品加工及绿色食品', value: '2' },
+  { label: '光电子及智能传感器', value: '3' },
+  { label: '车规级芯片及功率半导体器件', value: '4' },
+  { label: '新能源及动力电池', value: '5' },
+  { label: '生物基新材料', value: '6' },
+  { label: '人工智能及智能机器人', value: '7' },
+  { label: '碳纤维及复合材料', value: '8' },
+  { label: '遥感卫星及航天航空技术', value: '9' },
+  { label: '精密仪器及先进装备', value: '10' },
+  { label: '生物医药及先进医疗器械', value: '11' }
+])
+const column = ref([
+  { name: '序号', style: { width: '240px' }, key: 'key' },
+  { name: '公司名称', style: { width: '280px' }, key: 'name' },
+  { name: '服务领域', style: { width: '260px' }, key: 'field' },
+  { name: '登记时间', style: { width: '260px' }, key: 'time' },
+  { name: '操作', style: { width: '260px' }, key: 'operation' }
+])
+const list = ref([
+  {
+    key: '1',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2020-07-01'
+  },
+  {
+    key: '2',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2021-02-09'
+  },
+  {
+    key: '3',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2023-11-11'
+  },
+  {
+    key: '4',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2021-04-21'
+  },
+  {
+    key: '5',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2022-09-11'
+  },
+  {
+    key: '6',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2023-07-51'
+  },
+  {
+    key: '7',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2023-07-51'
+  },
+  {
+    key: '8',
+    name: '长春市XXX有限公司',
+    field: '科技金融',
+    time: '2023-07-51'
+  }
+])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  // 城市
+  getCity().then(
+    (response) => (cityList.value = [{ label: '不限', value: '-1' }, ...response.address])
+  )
+  loading.value = false
+})
 </script>
 <style scoped lang="scss">
 .main {
+  background: url(/images/pingtai.jpg) no-repeat top center;
+  background-size: 100% 100%;
+  .w_1300 {
+    margin: 0 auto;
+    width: 1300px;
+  }
+  .one {
+    .image {
+      width: 100%;
+      height: 350px;
+    }
+  }
+  .two {
+    margin: 10px 0;
+    background-color: $global-color-fff;
+    .twoSeacher {
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+      position: relative;
+      border: solid 1px #e5e5e5;
+      border-bottom: 0;
+      font-size: $global-font-size-18;
+      color: #666;
+      min-height: 60px;
+      overflow: hidden;
+      .twoLeft {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        width: 110px;
+        text-align: center;
+        color: #000;
+        font-weight: bold;
+        background-color: #fafafa;
+      }
+      .twoRight {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 12px;
+        flex: 1;
+        border-left: solid 1px #e5e5e5;
+        background-color: #fff;
+        .label {
+          color: #313131;
+          margin-bottom: 10px;
+          padding: 8px 10px;
+          border-radius: 3px;
+          background-color: #fff;
+          border: solid 1px transparent;
+          cursor: pointer;
+        }
+        .label:first-child {
+          color: #0a58c2;
+          border: solid 1px #006dd2;
+        }
+      }
+      .button {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .twoTwo {
+    margin: 10px 0;
+    .twoTable {
+      display: flex;
+      justify-content: space-between;
+      color: $global-color-fff;
+      font-size: $global-font-size-20;
+      background-color: rgba(255, 255, 255, 0.1);
+      padding: 12px 0;
+      .label {
+        text-align: center;
+      }
+    }
+    .twoValue {
+      color: $global-color-fff;
+      font-size: $global-font-size-20;
+      .value {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 0;
+        .table-colunm {
+          width: 260px;
+          text-align: center;
+        }
+        .table-colunm1 {
+          width: 240px !important;
+        }
+        .table-colunm2 {
+          width: 280px !important;
+        }
+      }
+      .value:nth-child(2n) {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+    .twoTotal {
+      display: flex;
+      justify-content: center;
+      margin: 20px 0;
+    }
+  }
 }
 </style>

src/views/six/index.vue

@@ -1,16 +1,108 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <el-col :span="24" class="one">
+      <el-image class="image" :src="lists" fit="fill" />
+    </el-col>
+    <div class="two">
+      <div class="w_1300">
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>行业</span>
+          </div>
+          <div v-if="!oneShow" class="twoRight">
+            <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+          <div v-else class="twoRight">
+            <div class="label" v-for="(item, index) in plateList" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+          <div class="button">
+            <span v-if="!oneShow" @click="oneShow = true">
+              <el-icon><ArrowDown /></el-icon>
+            </span>
+            <span v-else @click="oneShow = false">
+              <el-icon><ArrowUp /></el-icon>
+            </span>
+          </div>
+        </div>
+        <div class="twoSeacher">
+          <div class="twoLeft">
+            <span>所在地</span>
+          </div>
+          <div class="twoRight">
+            <div class="label" v-for="(item, index) in cityList.slice(0, 15)" :key="index">
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="twoIpunt">
+          <a-input
+            class="input"
+            v-model:value="value"
+            size="large"
+            placeholder="中试平台/实验室名称"
+          />
+          <a-input class="input" size="large" v-model:value="value" placeholder="建设主体" />
+          <a-input class="input" size="large" v-model:value="value" placeholder="运营主体" />
+          <a-input class="input" size="large" v-model:value="value" placeholder="服务产业领域" />
+          <a-button class="button" size="large" type="primary">检索</a-button>
+        </div>
+      </div>
+    </div>
+    <el-col :span="24" class="thr">
+      <div class="w_1300">
+        <el-row :gutter="16">
+          <el-col :span="6" v-for="(item, index) in list" :key="index" @click="toView(item)">
+            <div class="list">
+              <el-image class="image" :src="item.url" fit="cover"> </el-image>
+              <el-col :span="24" class="name textOne">
+                <el-tooltip effect="dark" :content="item.name" placement="top">
+                  {{ item.name || '暂无名称' }}
+                </el-tooltip>
+              </el-col>
+              <el-col :span="24" class="other_1">
+                <span>建设主体：</span>
+                {{ item.build || '暂无建设主体' }}
+              </el-col>
+              <el-col :span="24" class="other_1">
+                <span>运营主体：</span>
+                {{ item.operate || '暂无运营主体' }}
+              </el-col>
+              <el-col :span="24" class="other_1">
+                <span>服务产业领域：</span>
+                {{ item.field || '暂无服务产业领域' }}
+              </el-col>
+              <el-col :span="24" class="other_1">
+                <span>地址：</span>
+                {{ item.address || '暂无地址' }}
+              </el-col>
+              <el-col :span="24" class="other_1">
+                <span>联系人：</span>
+                {{ item.contacts || '暂无联系人' }}
+              </el-col>
+              <el-col :span="24" class="other_1">
+                <span>联系电话：</span>
+                {{ item.phone || '暂无联系电话' }}
+              </el-col>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-col>
+    <el-col :span="24" class="four">
+      <el-pagination background layout="prev, pager, next" :total="1000" />
+    </el-col>
+  </custom-layout>
 </template>
 
 <script setup>
+// 图片引入
+import lists from '/images/bg-khal-list.jpg'
+import sever from '/images/sever.png'
+import { getCity } from '@/utils/city'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
@@ -18,8 +110,252 @@ const user = computed(() => userStore.user)
 const loading = ref(false)
 // 路由
 const router = useRouter()
+// 是否展开
+const oneShow = ref(false)
+const cityList = ref([])
+const plateList = ref([
+  { label: '不限', value: '-1' },
+  { label: '汽车电子及新型汽车零部件', value: '0' },
+  { label: '精细化工及天然气化工', value: '1' },
+  { label: '农产品加工及绿色食品', value: '2' },
+  { label: '光电子及智能传感器', value: '3' },
+  { label: '车规级芯片及功率半导体器件', value: '4' },
+  { label: '新能源及动力电池', value: '5' },
+  { label: '生物基新材料', value: '6' },
+  { label: '人工智能及智能机器人', value: '7' },
+  { label: '碳纤维及复合材料', value: '8' },
+  { label: '遥感卫星及航天航空技术', value: '9' },
+  { label: '精密仪器及先进装备', value: '10' },
+  { label: '生物医药及先进医疗器械', value: '11' }
+])
+// 列表
+const list = ref([
+  {
+    url: sever,
+    name: '粉末冶金新材料中试基地',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  },
+  {
+    url: sever,
+    name: '药物开发中试平台',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  },
+  {
+    url: sever,
+    name: '高端化学制剂实验室',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  },
+  {
+    url: sever,
+    name: '粉末冶金新材料中试基地',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  },
+  {
+    url: sever,
+    name: '粉末冶金新材料中试基地',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  },
+  {
+    url: sever,
+    name: '粉末冶金新材料中试基地',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  },
+  {
+    url: sever,
+    name: '粉末冶金新材料中试基地',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  },
+  {
+    url: sever,
+    name: '粉末冶金新材料中试基地',
+    build: 'xxxx有限公司',
+    operate: 'xxxx有限公司',
+    field: '新材料',
+    address: '长春市蔚山路333号',
+    contacts: '张先生',
+    phone: '13334566543'
+  }
+])
+let skip = 0
+let limit = inject('limit')
+const total = ref(6)
+// 请求
+onMounted(async () => {
+  loading.value = true
+  // 城市
+  getCity().then(
+    (response) => (cityList.value = [{ label: '不限', value: '-1' }, ...response.address])
+  )
+  await search()
+  loading.value = false
+})
+const search = async () => {}
+// 查看
+const toView = (item) => {
+  router.push({ path: '/platform/detail', query: { id: item.id || item._id } })
+}
+const currentPage = ref(1)
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
+  .w_1300 {
+    max-width: 1300px;
+    margin: 0 auto;
+  }
+  .one {
+    .image {
+      width: 100%;
+      height: 350px;
+    }
+  }
+  .two {
+    margin: 10px 0;
+    background-color: $global-color-fff;
+    .twoSeacher {
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+      position: relative;
+      border: solid 1px #e5e5e5;
+      // border-bottom: 0;
+      font-size: $global-font-size-18;
+      color: #666;
+      min-height: 60px;
+      overflow: hidden;
+      .twoLeft {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        width: 110px;
+        text-align: center;
+        color: #000;
+        font-weight: bold;
+        background-color: #fafafa;
+      }
+      .twoRight {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 12px;
+        flex: 1;
+        border-left: solid 1px #e5e5e5;
+        background-color: #fff;
+        .label {
+          color: #313131;
+          margin-bottom: 10px;
+          padding: 8px 10px;
+          border-radius: 3px;
+          background-color: #fff;
+          border: solid 1px transparent;
+          cursor: pointer;
+        }
+        .label:first-child {
+          color: #0a58c2;
+          border: solid 1px #006dd2;
+        }
+      }
+      .button {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .twoSeacher:first-child {
+      border-bottom: 0;
+    }
+
+    .twoIpunt {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 10px 0 0 0;
+      .input {
+        margin: 0 5px 0 0;
+      }
+      .button {
+        margin: 0 0 0 5px;
+      }
+    }
+  }
+  .thr {
+    .list {
+      padding: 15px;
+      border: 1px solid #f2f4f6;
+      border-radius: 8px;
+      margin: 0 0 15px 0;
+      .name {
+        font-size: $global-font-size-20;
+        font-weight: bold;
+        display: inline-block;
+        margin: 0 0 8px 0;
+      }
+
+      .name:hover {
+        color: #2374ff;
+        cursor: pointer;
+      }
+
+      .other_1 {
+        font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial, sans-serif;
+        font-size: $global-font-size-18;
+        font-weight: normal;
+        color: #666;
+      }
+
+      .other_1:hover {
+        color: #2374ff;
+        cursor: pointer;
+      }
+    }
+  }
+  .four {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+  }
 }
 </style>

src/views/thirteen/index.vue

@@ -1,25 +1,577 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <el-col :span="24" class="one">
+      <el-image class="image" :src="news" fit="fill" />
+    </el-col>
+    <el-col :span="24" class="two">
+      <div class="w_1200">
+        <el-col :span="24" class="two_1">
+          <el-row class="two_1_1" :gutter="20">
+            <el-col :span="6">
+              <el-row class="two_1_1_1">
+                <el-col :span="24" class="top1">
+                  <el-carousel :interval="4000" type="card" height="200px" @change="toChange">
+                    <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+                      <el-image class="image" :src="item.url" fit="fill" />
+                    </el-carousel-item>
+                  </el-carousel>
+                </el-col>
+                <el-col :span="24" class="center1">
+                  <el-col :span="24" class="title">{{ info.name }}</el-col>
+                  <el-col :span="24" class="other_1" v-if="info.client">
+                    委托方： {{ info.client }}
+                  </el-col>
+                  <el-col :span="24" class="other_1" v-if="info.partner">
+                    合作方： {{ info.partner }}
+                  </el-col>
+                  <el-col :span="24" class="other_2">{{ info.brief }}</el-col>
+                </el-col>
+                <el-col :span="24" class="bottom1">
+                  <el-button @click="toView(info)" type="primary">查看详情</el-button>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="18">
+              <el-row class="two_1_1_2" :gutter="20">
+                <el-col
+                  :span="6"
+                  class="list"
+                  v-for="(item, index) in list.slice(0, 8)"
+                  :key="index"
+                  @click="toView(item)"
+                >
+                  <el-row>
+                    <el-image class="image" :src="item.url" fit="fill" />
+                    <el-col :span="24" class="other">
+                      <el-col :span="24" class="title textOver">{{ item.name }}</el-col>
+                      <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-row class="two_1_2">
+            <el-image class="image" :src="journal5" fit="fill" />
+          </el-row>
+        </el-col>
+        <el-col :span="24" class="two_2">
+          <el-row :gutter="20">
+            <el-col :span="18" class="left">
+              <el-row class="left_1" :gutter="20">
+                <el-col
+                  :span="6"
+                  class="list"
+                  v-for="(item, index) in list"
+                  :key="index"
+                  @click="toView(item)"
+                >
+                  <el-row>
+                    <el-image class="image" :src="item.url" fit="fill" />
+                    <el-col :span="24" class="other">
+                      <el-col :span="24" class="title textOver">{{ item.name }}</el-col>
+                      <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="6" class="right">
+              <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">
+                    <h5 class="title" style="padding-top: 0px">“他山之石”</h5>
+                  </div>
+                </el-col>
+                <el-col :span="24" class="right_2">
+                  <el-col :span="24" class="right_2_1">
+                    <el-col :span="16" class="left">相关推荐 </el-col>
+                  </el-col>
+                  <el-col :span="24" class="content">
+                    <a-timeline>
+                      <a-timeline-item
+                        v-for="(item, index) in list"
+                        :key="index"
+                        @click="toView(item)"
+                      >
+                        <div class="name textOver">{{ item.name }}</div>
+                      </a-timeline-item>
+                    </a-timeline>
+                  </el-col>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24" class="page">
+              <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-row>
+        </el-col>
+      </div>
+    </el-col>
+  </custom-layout>
 </template>
 
 <script setup>
-import { UserStore } from '@/store/user'
-const userStore = UserStore()
-const user = computed(() => userStore.user)
-// 加载中
-const loading = ref(false)
+// 图片引入
+import news from '/images/news.png'
+import journal1 from '/images/journal_1.jpeg'
+import journal2 from '/images/journal_2.jpeg'
+import journal3 from '/images/journal_3.jpeg'
+import journal4 from '/images/journal_4.jpeg'
+import journal5 from '/images/journal_5.jpg'
+import journal6 from '/images/journal_6.jpg'
+const carouselList = ref([
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  }
+])
+const list = ref([
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal1,
+    name: '吉林省智能传感器产业链创新发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+  },
+  {
+    id: '1',
+    url: journal2,
+    name: '吉林省玉米深加工产业链创新发展研究',
+    client: '省工信厅',
+    partner: '省石化院',
+    brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
+  },
+  {
+    id: '1',
+    url: journal3,
+    name: '松原市玉米深加工产业园区高质量发展规划',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  },
+  {
+    id: '1',
+    url: journal4,
+    name: '吉林省肉牛(加工》产业发展研究',
+    client: '省工信厅',
+    partner: '吉林大学',
+    brief:
+      '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
+  }
+])
+let skip = 0
+let limit = inject('limit')
+const total = ref(0)
 // 路由
 const router = useRouter()
+// 加载中
+const loading = ref(false)
+const info = ref({
+  id: '1',
+  url: journal1,
+  name: '吉林省智能传感器产业链创新发展研究',
+  client: '省工信厅',
+  partner: '吉林大学',
+  brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
+})
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await search()
+  loading.value = false
+})
+const search = async () => {}
+// 轮播图改变
+const toChange = async (e) => {
+  info.value = carouselList.value[e]
+}
+// 查看详情
+const toView = async (item) => {
+  router.push({ path: '/journal', query: { id: item.id || item._id } })
+}
 </script>
 <style scoped lang="scss">
 .main {
+  .one {
+    .image {
+      width: 100%;
+      height: 200px;
+    }
+  }
+
+  .two {
+    margin: 10px 0;
+    .two_1 {
+      .two_1_1 {
+        margin: 0 0 10px 0;
+        .two_1_1_1 {
+          border-radius: 5px;
+          padding: 0 20px;
+          height: 520px;
+          background: rgb(248, 248, 248);
+          .top1 {
+            margin: 30px 0 0 0;
+          }
+          .center1 {
+            .title {
+              font-size: $global-font-size-18;
+              margin-bottom: 10px;
+              color: #383838;
+              font-weight: 600;
+              text-align: left;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+            .title:hover {
+              color: #2374ff;
+              cursor: pointer;
+            }
+            .other_1 {
+              font-size: $global-font-size-18;
+              color: #9b9994;
+              text-align: left;
+              margin-bottom: 5px;
+            }
+            .other_2 {
+              line-height: $global-font-size-18;
+              font-size: $global-font-size-18;
+              height: 80px;
+              overflow: hidden;
+              color: #1d1e20;
+              text-align: justify;
+              margin-bottom: 14px;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 3;
+              -webkit-box-orient: vertical;
+            }
+          }
+          .bottom1 {
+            text-align: center;
+          }
+        }
+        .two_1_1_2 {
+          display: flex;
+          .list {
+            .image {
+              width: 100%;
+              height: 190px;
+              padding: 0 20px;
+            }
+            .other {
+              .title {
+                font-size: $global-font-size-18;
+                margin: 10px 0;
+                color: #383838;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+              .title:hover {
+                color: #2374ff;
+                cursor: pointer;
+              }
+              .other_2 {
+                font-size: $global-font-size-18;
+                overflow: hidden;
+                color: #1d1e20;
+                text-align: justify;
+                margin-bottom: 14px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+        }
+      }
+      .two_1_2 {
+        .image {
+          width: 100%;
+        }
+      }
+    }
+    .two_2 {
+      margin: 10px 0 0 0;
+      .left {
+        .left_1 {
+          display: flex;
+          .list {
+            margin: 0 0 12px 0;
+
+            .image {
+              width: 100%;
+              height: 185px;
+              padding: 0 20px;
+            }
+            .other {
+              .title {
+                font-size: $global-font-size-18;
+                margin: 10px 0;
+                color: #383838;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+              .title:hover {
+                color: #2374ff;
+                cursor: pointer;
+              }
+              .other_2 {
+                font-size: $global-font-size-18;
+                overflow: hidden;
+                color: #1d1e20;
+                text-align: justify;
+                margin-bottom: 14px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+            }
+          }
+        }
+      }
+      .right {
+        .right_1 {
+          position: relative;
+          .image {
+            width: 100%;
+            height: 200px;
+          }
+          .text {
+            position: absolute;
+            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;
+            background-repeat: repeat;
+            background-position: 0 0;
+            background: -moz-linear-gradient(top, none, none);
+            background: -o-linear-gradient(top, none, none);
+            background: linear-gradient(top, none, none);
+            background: -webkit-gradient(linear, left top, left bottom, from(none), to(none));
+            box-sizing: border-box;
+            .title {
+              margin: 0;
+              padding: 0;
+              font-size: $global-font-size-18;
+              color: #fff;
+              text-align: center;
+              font-weight: normal;
+              font-style: normal;
+              text-decoration: none;
+              font-family: Tahoma;
+              line-height: 34px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              -webkit-text-overflow: ellipsis;
+              -moz-text-overflow: ellipsis;
+              overflow: hidden;
+            }
+          }
+        }
+        .right_2 {
+          .right_2_1 {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(90deg, #d7e8ff, #fff);
+            width: 300px;
+            height: 64px;
+            padding-left: 21px;
+            box-sizing: border-box;
+            margin-bottom: 7px;
+            .left {
+              font-size: $global-font-size-26;
+              font-family:
+                PingFangSC-Medium,
+                PingFang SC;
+              font-weight: 500;
+              color: #111;
+              line-height: 24px;
+            }
+            .right {
+              text-align: right;
+              font-size: $global-font-size-18;
+              font-family:
+                PingFangSC-Regular,
+                PingFang SC;
+              font-weight: 400;
+              color: #666;
+              cursor: pointer;
+            }
+          }
+          .content {
+            margin: 10px 0 0 0;
+            .name {
+              max-height: 48px;
+              font-size: $global-font-size-18;
+              font-family:
+                PingFangSC-Medium,
+                PingFang SC;
+              font-weight: 500;
+              color: #111;
+              line-height: 24px;
+              display: block;
+              cursor: pointer;
+            }
+            .name:hover {
+              color: #2374ff;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      .page {
+        display: flex;
+        flex-direction: row-reverse;
+        padding: 20px;
+      }
+    }
+  }
 }
 </style>

src/views/thr/parts/demand.vue

@@ -5,7 +5,7 @@
         <div class="demandOneLeft">
           <span>行业</span>
         </div>
-        <div v-if="oneShow" class="demandOneRight">
+        <div v-if="!twoShow" class="demandOneRight">
           <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
             {{ item.label }}
           </div>
@@ -16,17 +16,17 @@
           </div>
         </div>
         <div class="button">
-          <span v-if="!oneShow" @click="oneShow = true">
-            <el-icon><ArrowUp /></el-icon>
-          </span>
-          <span v-else @click="oneShow = false">
+          <span v-if="!twoShow" @click="twoShow = true">
             <el-icon><ArrowDown /></el-icon>
           </span>
+          <span v-else @click="twoShow = false">
+            <el-icon><ArrowUp /></el-icon>
+          </span>
         </div>
       </div>
       <div class="demandSeacher">
         <div class="demandOneLeft">
-          <span>行业分类</span>
+          <span>技术领域</span>
         </div>
         <div class="demandOneRight">
           <div class="label" v-for="(item, index) in typeList" :key="index">
@@ -50,10 +50,22 @@
         <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
           {{ item.name }}
         </div>
-        <div class="value" v-for="(item, index) in list" :key="index" :style="item.style">
-          {{ item.name }}
+      </div>
+      <div class="demandValue">
+        <div class="value" v-for="(item, index) in list" :key="index">
+          <div class="table-colunm table-colunm1">{{ item.num || '暂无' }}</div>
+          <div class="table-colunm table-colunm2">{{ item.name || '暂无' }}</div>
+          <div class="table-colunm">{{ item.field || '暂无' }}</div>
+          <div class="table-colunm">{{ item.area || '暂无' }}</div>
+          <div class="table-colunm">{{ item.money || '暂无' }}</div>
+          <div class="table-colunm">{{ item.status || '暂无' }}</div>
+          <div class="table-colunm">{{ item.time || '暂无' }}</div>
+          <div class="table-colunm">查看详情</div>
         </div>
       </div>
+      <div class="demandTotal">
+        <el-pagination background layout="prev, pager, next" :total="1000" />
+      </div>
     </div>
   </div>
 </template>
@@ -62,18 +74,118 @@ const plateList = inject('plateList')
 const typeList = inject('typeList')
 const cityList = inject('cityList')
 // 是否展开
-const oneShow = ref(false)
+const twoShow = ref(false)
 const column = ref([
   { name: '序号', style: { width: '100px' }, key: 'num' },
-  { name: '需方名称', style: { width: '220px' }, key: 'num' },
-  { name: '行业', style: { width: '160px' }, key: 'num' },
-  { name: '所在地', style: { width: '160px' }, key: 'num' },
-  { name: '投入预算', style: { width: '160px' }, key: 'num' },
-  { name: '状态', style: { width: '160px' }, key: 'num' },
-  { name: '截至日期', style: { width: '160px' }, key: 'num' },
-  { name: '操作', style: { width: '160px' }, key: 'num' }
+  { name: '需方名称', style: { width: '220px' }, key: 'name' },
+  { name: '行业', style: { width: '160px' }, key: 'field' },
+  { name: '所在地', style: { width: '160px' }, key: 'area' },
+  { name: '投入预算', style: { width: '160px' }, key: 'money' },
+  { name: '状态', style: { width: '160px' }, key: 'status' },
+  { name: '截至日期', style: { width: '160px' }, key: 'time' },
+  { name: '操作', style: { width: '160px' }, key: 'operation' }
+])
+const list = ref([
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  }
 ])
-const list = ref([])
 </script>
 <style scoped lang="scss">
 .demand {
@@ -138,11 +250,38 @@ const list = ref([])
       color: $global-color-fff;
       font-size: $global-font-size-20;
       background-color: rgba(255, 255, 255, 0.1);
-      padding: 10px 0;
+      padding: 12px 0;
       .label {
         text-align: center;
       }
     }
+    .demandValue {
+      color: $global-color-fff;
+      font-size: $global-font-size-20;
+      .value {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 0;
+        .table-colunm {
+          width: 160px;
+          text-align: center;
+        }
+        .table-colunm1 {
+          width: 100px !important;
+        }
+        .table-colunm2 {
+          width: 220px !important;
+        }
+      }
+      .value:nth-child(2n) {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+    .demandTotal {
+      display: flex;
+      justify-content: center;
+      margin: 20px 0;
+    }
   }
 }
 </style>

src/views/thr/parts/supply.vue

@@ -1,5 +1,287 @@
 <template>
-  <div class="demand">供方</div>
+  <div class="demand">
+    <div class="demandOne">
+      <div class="demandSeacher">
+        <div class="demandOneLeft">
+          <span>行业</span>
+        </div>
+        <div v-if="!oneShow" class="demandOneRight">
+          <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+        <div v-else class="demandOneRight">
+          <div class="label" v-for="(item, index) in plateList" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="button">
+          <span v-if="!oneShow" @click="oneShow = true">
+            <el-icon><ArrowDown /></el-icon>
+          </span>
+          <span v-else @click="oneShow = false">
+            <el-icon><ArrowUp /></el-icon>
+          </span>
+        </div>
+      </div>
+      <div class="demandSeacher">
+        <div class="demandOneLeft">
+          <span>技术领域</span>
+        </div>
+        <div class="demandOneRight">
+          <div class="label" v-for="(item, index) in typeList" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+      <div class="demandSeacher">
+        <div class="demandOneLeft">
+          <span>所在地</span>
+        </div>
+        <div class="demandOneRight">
+          <div class="label" v-for="(item, index) in cityList.slice(0, 15)" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="demandTwo">
+      <div class="demandTable">
+        <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="demandValue">
+        <div class="value" v-for="(item, index) in list" :key="index">
+          <div class="table-colunm table-colunm1">{{ item.num || '暂无' }}</div>
+          <div class="table-colunm table-colunm2">{{ item.name || '暂无' }}</div>
+          <div class="table-colunm">{{ item.field || '暂无' }}</div>
+          <div class="table-colunm">{{ item.area || '暂无' }}</div>
+          <div class="table-colunm">{{ item.money || '暂无' }}</div>
+          <!-- <div class="table-colunm">{{ item.status || '暂无' }}</div> -->
+          <div class="table-colunm">{{ item.time || '暂无' }}</div>
+          <div class="table-colunm">查看详情</div>
+        </div>
+      </div>
+      <div class="demandTotal">
+        <el-pagination background layout="prev, pager, next" :total="1000" />
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style scoped lang="scss"></style>
+<script setup>
+const plateList = inject('plateList')
+const typeList = inject('typeList')
+const cityList = inject('cityList')
+// 是否展开
+const oneShow = ref(false)
+const column = ref([
+  { name: '序号', style: { width: '100px' }, key: 'num' },
+  { name: '供方内容', style: { width: '220px' }, key: 'name' },
+  { name: '行业', style: { width: '192px' }, key: 'field' },
+  { name: '所在地', style: { width: '192px' }, key: 'area' },
+  { name: '投入预算', style: { width: '192px' }, key: 'money' },
+  // { name: '状态', style: { width: '160px' }, key: 'status' },
+  { name: '截至日期', style: { width: '192px' }, key: 'time' },
+  { name: '操作', style: { width: '192px' }, key: 'operation' }
+])
+const list = ref([
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  },
+  {
+    num: '1',
+    name: '卡拉胶的应用与开发',
+    field: '其他',
+    area: '吉林长春',
+    money: '100万元',
+    status: '未解决',
+    time: '2024-6-20'
+  }
+])
+</script>
+<style scoped lang="scss">
+.demand {
+  padding: 10px 0;
+  .demandOne {
+    background-color: $global-color-fff;
+    .demandSeacher {
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+      position: relative;
+      border: solid 1px #e5e5e5;
+      border-bottom: 0;
+      font-size: $global-font-size-18;
+      color: #666;
+      min-height: 60px;
+      overflow: hidden;
+      .demandOneLeft {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        width: 110px;
+        text-align: center;
+        color: #000;
+        font-weight: bold;
+        background-color: #fafafa;
+      }
+      .demandOneRight {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 12px;
+        flex: 1;
+        border-left: solid 1px #e5e5e5;
+        background-color: #fff;
+        .label {
+          color: #313131;
+          margin-bottom: 10px;
+          padding: 8px 10px;
+          border-radius: 3px;
+          background-color: #fff;
+          border: solid 1px transparent;
+          cursor: pointer;
+        }
+        .label:first-child {
+          color: #0a58c2;
+          border: solid 1px #006dd2;
+        }
+      }
+      .button {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .demandTwo {
+    margin: 10px 0;
+    .demandTable {
+      display: flex;
+      justify-content: space-between;
+      color: $global-color-fff;
+      font-size: $global-font-size-20;
+      background-color: rgba(255, 255, 255, 0.1);
+      padding: 12px 0;
+      .label {
+        text-align: center;
+      }
+    }
+    .demandValue {
+      color: $global-color-fff;
+      font-size: $global-font-size-20;
+      .value {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px 0;
+        .table-colunm {
+          width: 192px;
+          text-align: center;
+        }
+        .table-colunm1 {
+          width: 100px !important;
+        }
+        .table-colunm2 {
+          width: 220px !important;
+        }
+      }
+      .value:nth-child(2n) {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+    .demandTotal {
+      display: flex;
+      justify-content: center;
+      margin: 20px 0;
+    }
+  }
+}
+</style>