修改样式

package-lock.json

@@ -20,6 +20,7 @@
         "moment": "^2.29.4",
         "naf-core": "^0.1.2",
         "pinia": "^2.0.36",
+        "swiper": "^11.0.5",
         "vue": "^3.3.2",
         "vue-router": "^4.2.0",
         "vue3-seamless-scroll": "^2.0.1",
@@ -4912,6 +4913,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.0.5.tgz",
+      "integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",
@@ -9319,6 +9328,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "swiper": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.0.5.tgz",
+      "integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w=="
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-2.2.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "moment": "^2.29.4",
     "naf-core": "^0.1.2",
     "pinia": "^2.0.36",
+    "swiper": "^11.0.5",
     "vue": "^3.3.2",
     "vue-router": "^4.2.0",
     "vue3-seamless-scroll": "^2.0.1",

src/components/head.vue

@@ -2,7 +2,7 @@
   <div id="head">
     <el-row>
       <el-col :span="24" class="head">
-        <div class="w_1200">
+        <div class="w_1200" v-if="is_head">
           <el-row :gutter="20" class="one">
             <el-row :gutter="10" class="left">
               <el-col :span="4">
@@ -18,19 +18,19 @@
             </el-col>
             <el-col :span="4" class="button">
               <a-space wrap>
-                <a-button type="primary">登录</a-button>
-                <a-button>注册</a-button>
+                <a-button @click="toLogin" type="primary">登录</a-button>
+                <a-button @click="toRegister">注册</a-button>
               </a-space>
             </el-col>
           </el-row>
         </div>
-        <el-col :span="24" class="two">
+        <el-col :span="24" class="two" v-if="is_menu">
           <a-menu @select="selectMenu" v-model:selectedKeys="current" mode="horizontal" theme="dark" :items="menuList" />
         </el-col>
         <el-col :span="24" class="thr">
           <slot name="info"></slot>
         </el-col>
-        <div class="foot">
+        <div class="foot" v-if="is_foot">
           <div class="w_1200 footflex">
             <el-image class="image" src="/src/assets/unit.png" fit="fill" />
             <el-col :span="12" class="foot_1">
@@ -41,8 +41,12 @@
             </el-col>
             <el-col :span="3" class="foot_2">
               <div class="footTop">关于我们</div>
-              <div class="footTitle footflex1"><span class="footSpan">关于我们</span> <span class="footSpan">意见反馈</span></div>
-              <div class="footTitle footflex1"><span class="footSpan">联系我们</span> <span class="footSpan">法律条款</span></div>
+              <div class="footTitle footflex1">
+                <span class="footSpan" @click="toHelp(0)">关于我们</span> <span class="footSpan" @click="toHelp(1)">意见反馈</span>
+              </div>
+              <div class="footTitle footflex1">
+                <span class="footSpan" @click="toHelp(2)">联系我们</span> <span class="footSpan" @click="toHelp(3)">法律条款</span>
+              </div>
             </el-col>
             <el-col :span="4" class="foot_3 footflex">
               <el-image class="image" src="/src/assets/code.png" fit="fill" />
@@ -56,11 +60,24 @@
 </template>
 <script setup lang="ts">
 import type { Ref } from 'vue';
-import { ref } from 'vue';
+import { ref, toRefs } from 'vue';
 import { siteInfo } from '@/layout/site';
 import { MenuProps } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const props = defineProps({
+  is_head: { type: Boolean, default: true },
+  is_menu: { type: Boolean, default: true },
+  is_foot: { type: Boolean, default: true }
+});
+const { is_menu, is_head, is_foot } = toRefs(props);
 const current = ref<string[]>(['tran']);
 const menuList = ref<MenuProps['items']>([
+  // {
+  //   key: 'home',
+  //   label: '首页',
+  //   title: '首页'
+  // },
   {
     key: 'tran',
     label: '交易大厅',
@@ -98,6 +115,18 @@ const onSearch = (searchValue: string) => {
   console.log('use value', searchValue);
   console.log('or use this.value', input.value);
 };
+// 登录
+const toLogin = (status) => {
+  router.push({ path: '/login', query: { status } });
+};
+// 去注册
+const toRegister = () => {
+  router.push({ path: '/register' });
+};
+// 帮助中心
+const toHelp = (type) => {
+  router.push({ path: '/help', query: { type } });
+};
 </script>
 <style scoped lang="scss">
 .head {
@@ -106,6 +135,7 @@ const onSearch = (searchValue: string) => {
     align-items: center;
     justify-content: space-between;
     padding: 20px 0;
+
     .left {
       .title {
         font-family: Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', STHeiti, '华文细黑', sans-serif;
@@ -115,11 +145,13 @@ const onSearch = (searchValue: string) => {
         font-weight: 500;
         padding-bottom: 8px;
       }
+
       .English {
         font-size: 15px;
       }
     }
   }
+
   .two {
     display: flex;
     justify-content: center;
@@ -132,6 +164,7 @@ const onSearch = (searchValue: string) => {
     z-index: 99999;
   }
 }
+
 .foot {
   padding: 5px 0;
   font-size: 13px;

src/components/search.vue

@@ -35,7 +35,6 @@
                   </template>
                   <template v-else>
                     <slot :name="item.model" v-bind="{ item }"></slot>
-                    <!-- <el-input v-model="form[item.model]" clearable :placeholder="`输入${item.label}`"></el-input> -->
                   </template>
                 </el-form-item>
               </el-col>

src/router/index.ts

@@ -24,26 +24,11 @@ const router = createRouter({
       meta: { title: '吉林省重点领域技术转移平台-用户注册' },
       component: () => import('@/views/register/index.vue')
     },
-    {
-      path: '/trade/one',
-      meta: { title: '吉林省重点领域技术转移平台' },
-      component: () => import('@/views/trade/one.vue')
-    },
-    {
-      path: '/trade/two',
-      meta: { title: '吉林省重点领域技术转移平台' },
-      component: () => import('@/views/trade/two.vue')
-    },
     {
       path: '/trade/detail',
       meta: { title: '吉林省重点领域技术转移平台' },
       component: () => import('@/views/trade/detail.vue')
     },
-    {
-      path: '/achieve',
-      meta: { title: '吉林省重点领域技术转移平台' },
-      component: () => import('@/views/achieve/index.vue')
-    },
     {
       path: '/achieve/detail',
       meta: { title: '吉林省重点领域技术转移平台' },
@@ -64,11 +49,6 @@ const router = createRouter({
       meta: { title: '吉林省重点领域技术转移平台' },
       component: () => import('@/views/activity/video.vue')
     },
-    {
-      path: '/demand',
-      meta: { title: '吉林省重点领域技术转移平台' },
-      component: () => import('@/views/demand/index.vue')
-    },
     {
       path: '/demand/detail',
       meta: { title: '吉林省重点领域技术转移平台' },
@@ -93,10 +73,18 @@ const router = createRouter({
       path: '/policy/detail',
       meta: { title: '吉林省重点领域技术转移平台' },
       component: () => import('@/views/policy/detail.vue')
+    },
+    {
+      path: '/help',
+      meta: { title: '吉林省重点领域技术转移平台' },
+      component: () => import('@/views/help/index.vue')
     }
   ]
 });
 router.beforeEach(async (to) => {
   document.title = `${to.meta.title} `;
 });
+router.afterEach(() => {
+  window.scrollTo(0, 0);
+});
 export default router;

src/views/achieve/detail.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <cHead>
+        <cHead :is_menu="false" :is_head="false">
           <template v-slot:info>
             <div class="w_1200">
               <el-col :span="24" class="one">
@@ -18,7 +18,7 @@
                 <el-row :span="24" class="one_2"> 普通许可 </el-row>
               </el-col>
               <el-col :span="24" class="two">
-                <a-descriptions bordered title="简介">
+                <a-descriptions bordered>
                   <a-descriptions-item label="行业分类">行业分类</a-descriptions-item>
                   <a-descriptions-item label="成果属性">成果属性</a-descriptions-item>
                   <a-descriptions-item label="出让方式">出让方式</a-descriptions-item>
@@ -29,7 +29,9 @@
                 </a-descriptions>
               </el-col>
               <el-col :span="24" class="thr">
-                <el-col :span="24" class="thr_1">单位信息</el-col>
+                <el-col :span="24" class="thr_1">
+                  <p>单位信息</p>
+                </el-col>
                 <el-row :span="24" class="thr_2">
                   <el-col :span="17" class="left">
                     <el-col :span="24" class="name">
@@ -49,9 +51,10 @@
               </el-col>
               <a-divider />
               <el-col :span="24" class="four">
-                <a-tabs>
-                  <a-tab-pane tab="成果描述">{{ info.brief || '暂无' }}</a-tab-pane>
-                </a-tabs>
+                <el-col :span="24" class="four_1">
+                  <p>成果描述</p>
+                </el-col>
+                <el-col :span="24" class="four_2">{{ info.brief || '暂无' }}</el-col>
               </el-col>
             </div>
           </template>
@@ -113,14 +116,16 @@ const searchOther = async () => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
   .one {
-    margin: 10px 0;
+    margin: 10px 0 0 0;
+    background: #f7f7f7;
+    padding: 24px;
+    border-top: 6px solid #2374ff;
+    overflow: hidden;
+    border-radius: 0 0 5px 5px;
 
     .one_1 {
-      margin: 20px 0 10px 0;
+      margin: 0 0 10px 0;
 
       .title {
         font-size: 18px;
@@ -167,10 +172,22 @@ const searchOther = async () => {
     margin: 0 0 10px 0;
 
     .thr_1 {
-      margin-bottom: 20px;
-      font-size: 18px;
-      font-weight: 700;
-      color: #383b40;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      border-bottom: 2px solid #2374ff;
+      margin: 20px 0;
+      background: #f7f7f7;
+
+      p {
+        float: left;
+        padding: 0 20px;
+        height: 40px;
+        border-bottom: 2px solid #2374ff;
+        color: #fff;
+        font-size: 18px;
+        background: #2374ff;
+      }
     }
 
     .thr_2 {
@@ -223,6 +240,25 @@ const searchOther = async () => {
 
   .four {
     margin: 0 0 10px 0;
+
+    .four_1 {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      border-bottom: 2px solid #2374ff;
+      margin: 20px 0;
+      background: #f7f7f7;
+
+      p {
+        float: left;
+        padding: 0 20px;
+        height: 40px;
+        border-bottom: 2px solid #2374ff;
+        color: #fff;
+        font-size: 18px;
+        background: #2374ff;
+      }
+    }
   }
 }
 </style>

src/views/achieve/index.vue

@@ -1,214 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch"> </cSearch>
-          </el-col>
-          <el-col :span="24" class="two">
-            <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="list">
-              <template #renderItem="{ item }">
-                <el-col :span="24" class="list" @click="toView(item)">
-                  <el-col :span="24" class="name textOver">
-                    <el-tooltip effect="dark" :content="item.name" placement="top">
-                      {{ item.name || '暂无名称' }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="two_1"> <span>技术领域: </span>{{ item.area || '暂无技术领域' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>成果地区: </span>{{ item.city || '暂无成果地区' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>单位: </span>{{ item.unit || '暂无单位' }} </el-col>
-                </el-col>
-              </template>
-            </a-list>
-          </el-col>
-          <el-col :span="24" class="thr">
-            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
-          </el-col>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 基础
-import type { Ref } from 'vue';
-import { onMounted, getCurrentInstance, ref } from 'vue';
-import { useRouter } from 'vue-router';
-// 接口
-// import { ToolsStore } from '@/stores/tool';
-// import type { IQueryResult } from '@/util/types.util';
-// const toolsAxios = ToolsStore();
-const { proxy } = getCurrentInstance() as any;
-
-// 路由
-const router = useRouter();
-// 加载中
-const loading: Ref<any> = ref(false);
-
-let list: Ref<any> = ref([
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  }
-]);
-let total: Ref<number> = ref(12);
-let skip = 0;
-let limit: number = proxy.$limit;
-const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
-// 查询数据
-let searchForm: Ref<any> = ref({});
-let fields: Ref<any[]> = ref([
-  { label: '行业分市场', model: 'type', isSearch: true },
-  { label: '技术领域', model: 'label', isSearch: true },
-  { label: '成熟度', model: 'value', isSearch: true },
-  { label: '出让方式', model: 'sort', isSearch: true },
-  { label: '交易价格', model: 'sort', isSearch: true },
-  { label: '成果地区', model: 'sort', isSearch: true }
-]);
-// 请求
-onMounted(async () => {
-  loading.value = true;
-  await searchOther();
-  await search({ skip, limit });
-  loading.value = false;
-});
-const search = async (e: { skip: number; limit: number }) => {
-  const info = { skip: e.skip, limit: e.limit };
-  //   const res: IQueryResult = await userCheckAxios.query(info);
-  //   if (res.errcode == '0') {
-  //     list.value = res.data;
-  //     total.value = res.total;
-  //   }
-};
-// 查询其他信息
-const searchOther = async () => {
-  //   let res: IQueryResult;
-  //   // 性别
-  //   res = await dictAxios.query({ type: 'common_gender' });
-  //   if (res.errcode == '0') genderList.value = res.data;
-};
-const toSearch = (query) => {
-  searchForm.value = query;
-  search({ skip, limit });
-};
-// 成果大厅查看详情
-const toView = (item) => {
-  router.push({ path: '/achieve/detail', query: { id: item.id || item._id } });
-};
-const onShowSizeChange = (current: number, pageSize: number) => {
-  console.log(current, pageSize);
-  limit = pageSize;
-};
-</script>
-<style scoped lang="scss">
-.main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
-  .one {}
-
-  .two {
-    .list {
-      background: #fff;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-      border-radius: 2px;
-      width: 282px;
-      height: 194px;
-      margin-bottom: 30px;
-      cursor: pointer;
-      transition: all 0.3s;
-      padding: 20px;
-
-      .name {
-        font-size: 16px;
-        color: #121834;
-        height: 16px;
-        line-height: 13px;
-        font-weight: 500;
-        margin: 10px 0;
-      }
-
-      .name:hover {
-        color: #2374ff;
-      }
-
-      .two_1 {
-        font-size: 12px;
-        text-align: justify;
-        line-height: 12px;
-        font-weight: 400;
-        letter-spacing: 0;
-        color: #8f97a3;
-        margin-top: 15px;
-
-        span:last-child {
-          color: #525a68;
-        }
-      }
-    }
-
-    .list:hover {
-      background: #f0f7ff;
-      box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
-    }
-  }
-
-  .thr {
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 0 0 10px 0;
-  }
-}
-</style>

src/views/activity/index.vue

@@ -2,32 +2,42 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-              <el-tab-pane label="全部报名" name="0"></el-tab-pane>
-              <el-tab-pane label="会议报名" name="1"></el-tab-pane>
-              <el-tab-pane label="培训报名" name="2"></el-tab-pane>
-              <el-tab-pane label="通知公告" name="3"></el-tab-pane>
-            </el-tabs>
-          </el-col>
-          <el-col :span="24" class="two">
-            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
-              <el-col :span="17" class="left textOver">
-                <span class="value" :class="[item.status == '0' ? 'status0' : 'status1']">{{ item.status == '0' ? '会议' : '培训' }}</span>
-                {{ item.title || '暂无标题' }}
+        <cHead :is_menu="false">
+          <template v-slot:info>
+            <div class="w_1200">
+              <el-col :span="24" class="one">
+                <el-tabs v-model="activeName" @tab-click="handleClick">
+                  <el-tab-pane label="全部报名" name="0"></el-tab-pane>
+                  <el-tab-pane label="会议报名" name="1"></el-tab-pane>
+                  <el-tab-pane label="培训报名" name="2"></el-tab-pane>
+                  <el-tab-pane label="通知公告" name="3"></el-tab-pane>
+                </el-tabs>
               </el-col>
-              <el-col :span="7" class="right">
-                <span class="time">{{ moment(item.time).format('MM-DD HH:mm') }}</span>
-                &nbsp;
-                <span class="time">{{ item.status == '0' ? '报名已截止' : '报名已截止' }}</span>
+              <el-col :span="24" class="two">
+                <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
+                  <el-col :span="17" class="left textOver">
+                    <span class="value" :class="[item.status == '0' ? 'status0' : 'status1']">{{ item.status == '0' ? '会议' : '培训' }}</span>
+                    {{ item.title || '暂无标题' }}
+                  </el-col>
+                  <el-col :span="7" class="right">
+                    <span class="time">{{ moment(item.time).format('MM-DD HH:mm') }}</span>
+                    &nbsp;
+                    <span class="time">{{ item.status == '0' ? '报名已截止' : '报名已截止' }}</span>
+                  </el-col>
+                </el-col>
               </el-col>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="thr">
-            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
-          </el-col>
-        </div>
+              <el-col :span="24" class="thr">
+                <a-pagination
+                  v-model:page-size="limit"
+                  show-size-changer
+                  :page-size-options="pageSizeOptions"
+                  :total="total"
+                  @showSizeChange="onShowSizeChange"
+                />
+              </el-col>
+            </div>
+          </template>
+        </cHead>
       </el-col>
     </el-row>
   </div>
@@ -138,9 +148,6 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
   .two {
     .list:hover {
       box-shadow: 0 0 16px rgba(35, 116, 255, 0.6);

src/views/activity/new.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <cHead>
+        <cHead :is_menu="false" :is_head="false">
           <template v-slot:info>
             <div class="w_1200">
               <el-col :span="24" class="one">
@@ -90,11 +90,9 @@ const searchOther = async () => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
   .one {
     margin: 20px 0 10px 0;
+    border-top: 6px solid #2374ff;
 
     .one_1 {
       margin: 5px 0;
@@ -120,6 +118,7 @@ const searchOther = async () => {
       .other {
         color: #383b40;
         margin-top: 13px;
+        font-size: 14px;
         line-height: 20px;
 
         span:first-child {

src/views/activity/video.vue

@@ -2,16 +2,19 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <el-col :span="24" class="name">{{ info.title || '暂无标题' }}</el-col>
-            <el-col :span="24" class="time"><span>发布时间</span> {{ info.time || '暂无发布时间' }}</el-col>
-            <el-col :span="24" class="video">
-              <cVideo :src="info.file" :second="3" />
-            </el-col>
-          </el-col>
-        </div>
-        <cFoot style="background-color: #2e3546; color: #f0f2f5"></cFoot>
+        <cHead :is_menu="false" :is_head="false">
+          <template v-slot:info>
+            <div class="w_1200">
+              <el-col :span="24" class="one">
+                <el-col :span="24" class="name">{{ info.title || '暂无标题' }}</el-col>
+                <el-col :span="24" class="time"><span>发布时间</span> {{ info.time || '暂无发布时间' }}</el-col>
+                <el-col :span="24" class="video">
+                  <cVideo :src="info.file" :second="3" />
+                </el-col>
+              </el-col>
+            </div>
+          </template>
+        </cHead>
       </el-col>
     </el-row>
   </div>

src/views/demand/detail.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <cHead>
+        <cHead :is_menu="false" :is_head="false">
           <template v-slot:info>
             <div class="w_1200">
               <el-col :span="24" class="one">
@@ -18,7 +18,7 @@
                 <el-row :span="24" class="one_2"> 普通许可 </el-row>
               </el-col>
               <el-col :span="24" class="two">
-                <a-descriptions bordered title="简介">
+                <a-descriptions bordered>
                   <a-descriptions-item label="行业领域">行业领域</a-descriptions-item>
                   <a-descriptions-item label="需求紧急度">需求紧急度</a-descriptions-item>
                   <a-descriptions-item label="合作方式">合作方式</a-descriptions-item>
@@ -27,7 +27,9 @@
                 </a-descriptions>
               </el-col>
               <el-col :span="24" class="thr">
-                <el-col :span="24" class="thr_1">单位信息</el-col>
+                <el-col :span="24" class="thr_1">
+                  <p>单位信息</p>
+                </el-col>
                 <el-row :span="24" class="thr_2">
                   <el-col :span="17" class="left">
                     <el-col :span="24" class="name">
@@ -47,9 +49,10 @@
               </el-col>
               <a-divider />
               <el-col :span="24" class="four">
-                <a-tabs>
-                  <a-tab-pane tab="需求详情">{{ info.brief || '暂无' }}</a-tab-pane>
-                </a-tabs>
+                <el-col :span="24" class="four_1">
+                  <p>需求详情</p>
+                </el-col>
+                <el-col :span="24" class="four_2">{{ info.brief || '暂无' }}</el-col>
               </el-col>
             </div>
           </template>
@@ -108,14 +111,16 @@ const searchOther = async () => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
   .one {
-    margin: 10px 0;
+    margin: 10px 0 0 0;
+    background: #f7f7f7;
+    padding: 24px;
+    border-top: 6px solid #2374ff;
+    overflow: hidden;
+    border-radius: 0 0 5px 5px;
 
     .one_1 {
-      margin: 20px 0 10px 0;
+      margin: 0 0 10px 0;
 
       .title {
         font-size: 18px;
@@ -162,10 +167,22 @@ const searchOther = async () => {
     margin: 0 0 10px 0;
 
     .thr_1 {
-      margin-bottom: 20px;
-      font-size: 18px;
-      font-weight: 700;
-      color: #383b40;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      border-bottom: 2px solid #2374ff;
+      margin: 20px 0;
+      background: #f7f7f7;
+
+      p {
+        float: left;
+        padding: 0 20px;
+        height: 40px;
+        border-bottom: 2px solid #2374ff;
+        color: #fff;
+        font-size: 18px;
+        background: #2374ff;
+      }
     }
 
     .thr_2 {
@@ -218,6 +235,25 @@ const searchOther = async () => {
 
   .four {
     margin: 0 0 10px 0;
+
+    .four_1 {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      border-bottom: 2px solid #2374ff;
+      margin: 20px 0;
+      background: #f7f7f7;
+
+      p {
+        float: left;
+        padding: 0 20px;
+        height: 40px;
+        border-bottom: 2px solid #2374ff;
+        color: #fff;
+        font-size: 18px;
+        background: #2374ff;
+      }
+    }
   }
 }
 </style>

src/views/demand/index.vue

@@ -1,228 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch"> </cSearch>
-          </el-col>
-          <el-col :span="24" class="two">
-            <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="list">
-              <template #renderItem="{ item }">
-                <el-col :span="24" class="list" @click="toView(item)">
-                  <el-col :span="24" class="name textOver">
-                    <el-tooltip effect="dark" :content="item.name" placement="top">
-                      {{ item.name || '暂无名称' }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="two_1"> <span>技术领域: </span>{{ item.area || '暂无技术领域' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>需求地区: </span>{{ item.city || '暂无需求地区' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>单位: </span>{{ item.unit || '暂无单位' }} </el-col>
-                </el-col>
-              </template>
-            </a-list>
-          </el-col>
-          <el-col :span="24" class="thr">
-            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
-          </el-col>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 基础
-import type { Ref } from 'vue';
-import { onMounted, getCurrentInstance, ref } from 'vue';
-import { useRouter } from 'vue-router';
-// 接口
-// import { ToolsStore } from '@/stores/tool';
-// import type { IQueryResult } from '@/util/types.util';
-// const toolsAxios = ToolsStore();
-const { proxy } = getCurrentInstance() as any;
-
-// 路由
-const router = useRouter();
-// 加载中
-const loading: Ref<any> = ref(false);
-let list: Ref<any> = ref([
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  },
-  {
-    name: '拉力均衡强稳定性无焊口锚链',
-    area: '先进制造',
-    city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
-  }
-]);
-let total: Ref<number> = ref(12);
-let skip = 0;
-let limit: number = proxy.$limit;
-const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
-// 查询数据
-let searchForm: Ref<any> = ref({});
-let fields: Ref<any[]> = ref([
-  { label: '技术领域', model: 'type', isSearch: true },
-  { label: '合作方式', model: 'label', isSearch: true },
-  { label: '需求地区', model: 'value', isSearch: true },
-  { label: '需求状态', model: 'sort', isSearch: true }
-]);
-// 请求
-onMounted(async () => {
-  loading.value = true;
-  await searchOther();
-  await search({ skip, limit });
-  loading.value = false;
-});
-const search = async (e: { skip: number; limit: number }) => {
-  const info = { skip: e.skip, limit: e.limit };
-  //   const res: IQueryResult = await userCheckAxios.query(info);
-  //   if (res.errcode == '0') {
-  //     list.value = res.data;
-  //     total.value = res.total;
-  //   }
-};
-// 查询其他信息
-const searchOther = async () => {
-  //   let res: IQueryResult;
-  //   // 性别
-  //   res = await dictAxios.query({ type: 'common_gender' });
-  //   if (res.errcode == '0') genderList.value = res.data;
-};
-const toSearch = (query) => {
-  searchForm.value = query;
-  search({ skip, limit });
-};
-// 需求大厅查看详情
-const toView = (item) => {
-  router.push({ path: '/demand/detail', query: { id: item.id || item._id } });
-};
-const onShowSizeChange = (current: number, pageSize: number) => {
-  console.log(current, pageSize);
-  limit = pageSize;
-};
-</script>
-<style scoped lang="scss">
-.main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-  .one {}
-
-  .two {
-    .list {
-      background: #fff;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-      border-radius: 2px;
-      width: 282px;
-      height: 194px;
-      margin-bottom: 30px;
-      cursor: pointer;
-      transition: all 0.3s;
-      padding: 20px;
-
-      .name {
-        font-size: 16px;
-        color: #121834;
-        height: 16px;
-        line-height: 13px;
-        font-weight: 500;
-        margin: 10px 0;
-      }
-
-      .name:hover {
-        color: #2374ff;
-      }
-
-      .two_1 {
-        font-size: 12px;
-        text-align: justify;
-        line-height: 12px;
-        font-weight: 400;
-        letter-spacing: 0;
-        color: #8f97a3;
-        margin-top: 15px;
-
-        span:last-child {
-          color: #525a68;
-        }
-      }
-    }
-
-    .list:hover {
-      background: #f0f7ff;
-      box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
-    }
-  }
-
-  .thr {
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 0 0 10px 0;
-  }
-}
-</style>

src/views/help/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <cHead :is_menu="false">
+          <template v-slot:info>
+            <div class="w_1200">
+              <el-row class="help">
+                <el-col :span="6" class="left">
+                  <a-menu v-model:selectedKeys="selectedKeys" style="width: 256px" mode="inline" :items="menuList" @select="onOpenChange"></a-menu>
+                </el-col>
+                <el-col v-if="select === '1'" :span="18" class="right">关于我们</el-col>
+                <el-col v-else-if="select === '2'" :span="18" class="right">意见反馈</el-col>
+                <el-col v-else-if="select === '3'" :span="18" class="right">联系我们</el-col>
+                <el-col v-else-if="select === '4'" :span="18" class="right">法律条款</el-col>
+              </el-row>
+            </div>
+          </template>
+        </cHead>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 基础
+import type { Ref } from 'vue';
+import { onMounted, ref, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { ItemType } from 'ant-design-vue';
+// 接口
+// import { ToolsStore } from '@/stores/tool';
+// import type { IQueryResult } from '@/util/types.util';
+// const toolsAxios = ToolsStore();
+const route = useRoute();
+// 加载中
+const loading: Ref<any> = ref(false);
+const info: Ref<any> = ref({});
+const selectedKeys: Ref<any> = ref(['1']);
+const select: Ref<any> = ref('1');
+const menuList: ItemType[] = reactive([
+  {
+    key: '1',
+    label: '关于我们',
+    title: '关于我们'
+  },
+  {
+    key: '2',
+    label: '意见反馈',
+    title: '意见反馈'
+  },
+  {
+    key: '3',
+    label: '联系我们',
+    title: '联系我们'
+  },
+  {
+    key: '4',
+    label: '法律条款',
+    title: '法律条款'
+  }
+]);
+// 请求
+onMounted(async () => {
+  loading.value = true;
+  search();
+  loading.value = false;
+});
+const search = async () => {
+  //   let res: IQueryResult = await toolsAxios.dataCount();
+  //   if (res.errcode == '0') {
+  //     info.value = res.data;
+  //   }
+};
+const onOpenChange = (item) => {
+  select.value = item.key;
+};
+</script>
+<style scoped lang="scss">
+.main {
+  .help {
+    padding: 10px 0;
+    min-height: 490px;
+    .left {
+      display: flex;
+      align-items: normal;
+    }
+  }
+}
+</style>

src/views/home/components/achievement.vue

@@ -2,35 +2,64 @@
   <div id="achievement">
     <el-row>
       <el-col :span="24" class="achievement">
-        <el-col :span="24" class="one">
-          <el-col :span="20" class="left">
-            <el-image class="image" src="/src/assets/achieve.png" fit="fill" />
-            <span>成果信息</span>
-          </el-col>
-          <el-col :span="4" class="right" @click="toMore"> 更多 > </el-col>
-        </el-col>
-        <el-col :span="24" class="two">
-          <el-col :span="24" class="two_1">
-            <el-col :span="10" class="title">成果名称</el-col>
-            <el-col :span="4" class="title">技术领域</el-col>
-            <el-col :span="4" class="title">成果地区</el-col>
-            <el-col :span="6" class="title">单位</el-col>
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-row class="one_1">
+              <el-col :span="2" class="left">行业分市场</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in typeList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">技术领域</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in areaList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">成熟度</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in matureList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">出让方式</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in wayList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">交易价格</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in moneyList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">成果地区</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in cityList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
           </el-col>
-          <el-col :span="24" class="two_2" id="tableRef">
-            <vue3-seamless-scroll :list="list" :hover="true" :step="0.8" :wheel="true" :isWatch="true">
-              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
-                <el-col :span="10" class="content textOver">
-                  <el-tooltip effect="dark" :content="item.name" placement="top">
-                    {{ item.name || '暂无成果名称' }}
-                  </el-tooltip>
-                </el-col>
-                <el-col :span="4" class="content textOver"> {{ item.area || '暂无技术领域' }} </el-col>
-                <el-col :span="4" class="content textOver"> {{ item.city || '暂无成果地区' }} </el-col>
-                <el-col :span="6" class="content textOver"> {{ item.unit || '暂无单位' }} </el-col>
+          <el-col :span="24" class="two">
+            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
+              <el-col :span="24" class="name">
+                <el-tooltip effect="dark" :content="item.name" placement="top">
+                  {{ item.name || '暂无成果名称' }}
+                </el-tooltip>
               </el-col>
-            </vue3-seamless-scroll>
+              <el-row class="other">
+                <el-col :span="8" class="other_1"><span>技术领域：</span>{{ item.area || '暂无技术领域' }}</el-col>
+                <el-col :span="8" class="other_1"><span>成果地区：</span>{{ item.city || '暂无成果地区' }}</el-col>
+                <el-col :span="8" class="other_1"><span>单位：</span>{{ item.unit || '暂无单位' }}</el-col>
+              </el-row>
+              <el-col :span="24" class="brief textOver">{{ item.brief || '没有更多成果简介' }}</el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="thr">
+            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
           </el-col>
-        </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -51,7 +80,9 @@ const list: Ref<any> = ref([
     name: '拉力均衡强稳定性无焊口锚链',
     area: '先进制造',
     city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
+    unit: '浙江易丰安全科技有限公司',
+    brief:
+      '技术特点：专为电子商务行业设计，以自动化和流程化地管理订单、财务、仓库、物流和发货等业务为主。它的目标是提高商家的订单速度和出货速度，有效管理企业内部员工的工作能力和监管财务系统，以及改善企业业务流程、提高企业核心竞争力'
   },
   {
     name: '拉力均衡强稳定性无焊口锚链',
@@ -135,14 +166,95 @@ const list: Ref<any> = ref([
 let total: Ref<number> = ref(12);
 let skip = 0;
 let limit: number = proxy.$limit;
-// 查看更多
-const toMore = () => {
-  router.push({ path: `/achieve` });
-};
+const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
+// 字典表
+const typeList: Ref<any> = ref([
+  { 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: '海洋科技' }
+]);
+const areaList: Ref<any> = ref([
+  { 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', label: '航空航天' }
+]);
+
+const wayList: Ref<any> = ref([
+  { value: '0', label: '全部' },
+  { value: '1', label: '转让' },
+  { value: '2', label: '许可' },
+  { value: '3', label: '作价入股' },
+  { value: '4', label: '其他' },
+  { value: '4', label: '免费许可/先用后转' }
+]);
+const matureList: Ref<any> = ref([
+  { value: '0', label: '全部' },
+  { value: '1', label: '正在研发' },
+  { value: '2', label: '已有样品' },
+  { value: '3', label: '通过小试' },
+  { value: '4', label: '通过中试' }
+]);
+
+const moneyList: Ref<any> = ref([
+  { value: '0', label: '全部' },
+  { value: '1', label: '面议' },
+  { value: '2', label: '1-10万元' },
+  { value: '3', label: '10-20万元' },
+  { value: '4', label: '20-100万元' },
+  { value: '5', label: '100-500万元' },
+  { value: '6', label: '500-1000万元' },
+  { value: '7', label: '1000万元以上' },
+]);
+const cityList: Ref<any> = ref([
+  { 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', 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', label: '云南省' }
+]);
 // 查看
 const toView = (item) => {
   router.push({ path: '/achieve/detail', query: { id: item.id || item._id } });
 };
+const onShowSizeChange = (current: number, pageSize: number) => {
+  console.log(current, pageSize);
+  limit = pageSize;
+};
 // 请求
 onMounted(async () => {
   loading.value = true;
@@ -168,87 +280,93 @@ const searchOther = async () => {
 </script>
 <style lang="scss" scoped>
 .achievement {
-  width: 1200px;
   padding: 20px;
   min-height: 423px;
+  background: rgb(248, 248, 248);
 
   .one {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 0 10px 0;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
 
-    .left {
+    .one_1 {
       display: flex;
       align-items: center;
+      padding: 10px 0;
+      border-bottom: #9d9898 1px dashed;
 
-      span {
-        font-size: 20px;
-        color: #333;
-        font-weight: bold;
-        margin: 0 0 0 5px;
+      .left {
+        text-align: center;
       }
 
-      .image {
-        width: 40px;
-        height: 40px;
-      }
-    }
+      .right {
+        .title {
+          color: #666;
+          font-size: 14px;
+          line-height: 15px;
+          margin: 0 10px;
+          display: inline-block;
+          overflow: hidden;
+          text-decoration: none;
+        }
 
-    .right {
-      text-align: right;
-      font-size: 12px;
-    }
-    .right:hover {
-      color: #2374ff;
+        .title:hover {
+          color: #2374ff;
+        }
+      }
     }
   }
 
   .two {
-    width: 100%;
+    margin-top: 20px;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
 
-    .two_1 {
-      display: flex;
-      justify-content: center;
-      height: 50px;
-      background-image: linear-gradient(#dbebf8, #fafafa);
-      line-height: 50px;
-      color: #333;
-      font-size: 16px;
-
-      .title {
-        text-align: center;
+    .list {
+      margin-bottom: 30px;
+      border-bottom: 1px solid #ebebeb;
+      padding-bottom: 10px;
+      background: url(/src/assets/achieve.png) right bottom no-repeat;
+      background-size: contain;
+
+      .name {
+        color: #337ab7;
+        font-size: 18px;
+        font-weight: bold;
+        display: inline-block;
+        margin: 10px 0;
       }
-    }
 
-    .two_2 {
-      max-height: 300px;
-      overflow: hidden;
-      border: 1px solid #b2c1ff;
-
-      .list {
-        display: flex;
-        justify-content: center;
-        height: 50px;
-        line-height: 50px;
-        font-size: 16px;
-        color: #666;
-        background: #fff;
+      .name:hover {
+        color: #2374ff;
+      }
+
+      .other {
+        padding: 5px 0;
 
-        .content {
-          text-align: center;
+        .other_1 {
+          font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial, sans-serif;
+          font-size: 12px;
+          font-weight: normal;
         }
 
-        .content:hover {
+        .other_1:hover {
           color: #2374ff;
         }
       }
 
-      .list:nth-child(2n) {
-        background: #f4f4f4;
+      .brief {
+        line-height: 30px;
+        color: #666;
+        font-size: 14px;
       }
     }
   }
+  .thr {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 20px;
+  }
 }
 </style>

src/views/home/components/activity.vue

@@ -32,7 +32,8 @@
                 <el-col :span="24" class="content" v-show="activeName == '0'">
                   <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toNewsView(item)">
                     <el-col :span="17" class="left textOver">
-                      <span class="value" :class="[item.status == '0' ? 'status0' : 'status1']">{{ item.status == '0' ? '会议' : '培训' }}</span>
+                      <span class="value" :class="[item.status == '0' ? 'status0' : 'status1']">{{ item.status == '0' ?
+                        '会议' : '培训' }}</span>
                       {{ item.title || '暂无标题' }}
                     </el-col>
                     <el-col :span="7" class="right">
@@ -115,27 +116,18 @@
             <div class="English">VIDEO ON DEMAND</div>
           </el-col>
           <el-col :span="24" class="two">
-            <div class="list" v-for="(item, index) in video" :key="index" @click="toVideoView(item)">
+            <div class="list" v-for="(item, index) in video" :key="index">
               <el-col :span="24" class="top">
-                <el-image class="image" :src="item.url" fit="fill" />
+                <cVideo height="160px" width="328px" :src="item.url" :second="3" />
               </el-col>
-              <el-col :span="24" class="bottom">
-                <el-col :span="24" class="time"><span>发布时间</span>{{ item.time || '暂无发布时间' }}</el-col>
+              <el-col :span="24" class="bottom" @click="toVideoView(item)">
+                <el-col :span="24" class="time"><span>发布时间</span>&nbsp;{{ item.time || '暂无发布时间' }}</el-col>
                 <el-col :span="24" class="title textOver">{{ item.title || '暂无视频' }}</el-col>
               </el-col>
             </div>
           </el-col>
           <el-col :span="24" class="thr">
-            <el-pagination
-              background
-              v-model:current-page="currentPage"
-              v-model:page-size="pageSize"
-              :page-sizes="[12, 24, 60, 120]"
-              layout="sizes, prev, pager, next"
-              :total="total"
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-            />
+            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
           </el-col>
         </el-col>
       </el-col>
@@ -228,28 +220,28 @@ const trends: Ref<any> = ref([
   }
 ]);
 const video: Ref<any> = ref([
-  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '“哪吒计划”先进电子专场路演——杭州专场', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_2.jpg', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' },
-  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video_1.png', time: '2023-12-11 08:00:00', status: '1' }
+  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '“哪吒计划”先进电子专场路演——杭州专场', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '2023年中国浙江网上技术市场活动周 首届浙江科技创新合作大会', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' },
+  { title: '浙江海宁—英国技术成果转移转化“云对接”活动', url: '/src/assets/video.mp4', time: '2023-12-11 08:00:00', status: '1' }
 ]);
-const carouselList: Ref<any> = ref([{ url: '/src/assets/one.png' }, { url: '/src/assets/two.png' }, { url: '/src/assets/thr.png' }]);
+const carouselList: Ref<any> = ref([{ url: '/src/assets/video_1.png' }, { url: '/src/assets/video_1.png' }, { url: '/src/assets/video_2.jpg' }]);
 const activeName = ref('0');
-const currentPage = ref(1);
-const pageSize = ref(12);
-// #endregion
-const emit = defineEmits(['toMore', 'toVideoView', 'toNewsView','toView', 'toPolicy']);
+const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
+let total: Ref<number> = ref(12);
+let skip = 0;
+let limit: number = proxy.$limit;
 // 查看更多
 const toMore = (item) => {
-  emit('toMore', item);
+  router.push({ path: '/activity', query: { id: item.id || item._id } });
 };
 const toVideoView = (item) => {
   router.push({ path: '/activity/video', query: { id: item.id || item._id } });
@@ -262,13 +254,11 @@ const toNewsView = (item) => {
 };
 // 行业动态查看更多
 const toPolicy = () => {
-  emit('toPolicy', '1');
-};
-const handleSizeChange = (val: number) => {
-  console.log(`${val} items per page`);
+  router.push({ path: '/policy', query: { type: '1' } });
 };
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`);
+const onShowSizeChange = (current: number, pageSize: number) => {
+  console.log(current, pageSize);
+  limit = pageSize;
 };
 // #endregion
 </script>
@@ -276,6 +266,7 @@ const handleCurrentChange = (val: number) => {
 .activity {
   padding: 20px;
   min-height: 423px;
+
   .activity_1 {
     display: flex;
     flex-direction: column;
@@ -466,10 +457,18 @@ const handleCurrentChange = (val: number) => {
         transition: all 0.3s;
 
         .left {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
           font-family: PingFangSC-Regular;
           font-size: 12px;
-          color: #2374ff;
           line-height: 12px;
+          width: 95px;
+          height: 75px;
+          background: #2374ff;
+          color: #fff;
+          margin-right: 15px;
 
           .year {
             margin-bottom: 2px;
@@ -542,9 +541,7 @@ const handleCurrentChange = (val: number) => {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-      width: 1200px;
       min-height: 320px;
-      margin: auto;
 
       .list {
         position: relative;
@@ -552,7 +549,7 @@ const handleCurrentChange = (val: number) => {
         border: 1px solid #eff0f3;
         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
         border-radius: 2px;
-        width: 282px;
+        width: 330px;
         min-height: 241px;
         margin-bottom: 30px;
         cursor: pointer;
@@ -569,11 +566,11 @@ const handleCurrentChange = (val: number) => {
         }
 
         .bottom {
-          padding: 12px 20px 20px;
+          padding: 12px;
 
           .time {
             font-size: 14px;
-            margin-bottom: 8px;
+            margin-bottom: 5px;
             color: rgb(108, 127, 163);
 
             span {
@@ -587,7 +584,7 @@ const handleCurrentChange = (val: number) => {
           }
 
           .title {
-            font-size: 18px;
+            font-size: 16px;
             color: #383b40;
             line-height: 28px;
             font-weight: 600;
@@ -601,5 +598,4 @@ const handleCurrentChange = (val: number) => {
       justify-content: end;
     }
   }
-}
-</style>
+}</style>

src/views/home/components/demand.vue

@@ -1,36 +1,53 @@
 <template>
-  <div id="demand">
+  <div id="achievement">
     <el-row>
-      <el-col :span="24" class="demand">
-        <el-col :span="24" class="one">
-          <el-col :span="20" class="left">
-            <el-image class="image" src="/src/assets/demand.png" fit="fill" />
-            <span>需求信息</span>
-          </el-col>
-          <el-col :span="4" class="right" @click="toMore"> 更多 > </el-col>
-        </el-col>
-        <el-col :span="24" class="two">
-          <el-col :span="24" class="two_1">
-            <el-col :span="10" class="title">需求名称</el-col>
-            <el-col :span="4" class="title">技术领域</el-col>
-            <el-col :span="4" class="title">需求地区</el-col>
-            <el-col :span="6" class="title">单位</el-col>
+      <el-col :span="24" class="achievement">
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-row class="one_1">
+              <el-col :span="2" class="left">技术领域</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in areaList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">合作方式</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in matureList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">需求地区</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in cityList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
+            <el-row class="one_1">
+              <el-col :span="2" class="left">需求状态</el-col>
+              <el-col :span="22" class="right">
+                <a-button class="title" v-for="(item, index) in statusList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+              </el-col>
+            </el-row>
           </el-col>
-          <el-col :span="24" class="two_2" id="tableRef">
-            <vue3-seamless-scroll :list="list" :hover="true" :step="0.8" :wheel="true" :isWatch="true">
-              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
-                <el-col :span="10" class="content textOver">
-                  <el-tooltip effect="dark" :content="item.name" placement="top">
-                    {{ item.name || '暂无成果名称' }}
-                  </el-tooltip>
-                </el-col>
-                <el-col :span="4" class="content textOver"> {{ item.area || '暂无技术领域' }} </el-col>
-                <el-col :span="4" class="content textOver"> {{ item.city || '暂无成果地区' }} </el-col>
-                <el-col :span="6" class="content textOver"> {{ item.unit || '暂无单位' }} </el-col>
+          <el-col :span="24" class="two">
+            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
+              <el-col :span="24" class="name">
+                <el-tooltip effect="dark" :content="item.name" placement="top">
+                  {{ item.name || '暂无需求名称' }}
+                </el-tooltip>
               </el-col>
-            </vue3-seamless-scroll>
+              <el-row class="other">
+                <el-col :span="8" class="other_1"><span>技术领域：</span>{{ item.area || '暂无技术领域' }}</el-col>
+                <el-col :span="8" class="other_1"><span>需求地区：</span>{{ item.city || '暂无需求地区' }}</el-col>
+                <el-col :span="8" class="other_1"><span>单位：</span>{{ item.unit || '暂无单位' }}</el-col>
+              </el-row>
+              <el-col :span="24" class="brief textOver">{{ item.brief || '没有更多需求简介' }}</el-col>
+            </el-col>
           </el-col>
-        </el-col>
+          <el-col :span="24" class="thr">
+            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
+          </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -51,7 +68,9 @@ const list: Ref<any> = ref([
     name: '拉力均衡强稳定性无焊口锚链',
     area: '先进制造',
     city: '舟山市',
-    unit: '浙江易丰安全科技有限公司'
+    unit: '浙江易丰安全科技有限公司',
+    brief:
+      '技术特点：专为电子商务行业设计，以自动化和流程化地管理订单、财务、仓库、物流和发货等业务为主。它的目标是提高商家的订单速度和出货速度，有效管理企业内部员工的工作能力和监管财务系统，以及改善企业业务流程、提高企业核心竞争力'
   },
   {
     name: '拉力均衡强稳定性无焊口锚链',
@@ -135,14 +154,74 @@ const list: Ref<any> = ref([
 let total: Ref<number> = ref(12);
 let skip = 0;
 let limit: number = proxy.$limit;
-// 查看更多
-const toMore = () => {
-  router.push({ path: `/demand` });
-};
+const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
+// 字典表
+const areaList: Ref<any> = ref([
+  { 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', label: '航空航天' }
+]);
+
+const cityList: Ref<any> = ref([
+  { 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', 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', label: '云南省' }
+]);
+
+const matureList: Ref<any> = ref([
+  { value: '0', label: '全部' },
+  { value: '1', label: '技术开发' },
+  { value: '2', label: '技术咨询' },
+  { value: '3', label: '技术服务' },
+  { value: '4', label: '许可转让' },
+  { value: '4', label: '完全转让' },
+  { value: '4', label: '技术入股' },
+  { value: '4', label: '合作开发' },
+  { value: '4', label: '其他' }
+]);
+const statusList: Ref<any> = ref([
+  { value: '0', label: '全部' },
+  { value: '1', label: '洽谈中' },
+  { value: '2', label: '已结束' }
+]);
 // 查看
 const toView = (item) => {
   router.push({ path: '/demand/detail', query: { id: item.id || item._id } });
 };
+const onShowSizeChange = (current: number, pageSize: number) => {
+  console.log(current, pageSize);
+  limit = pageSize;
+};
 // 请求
 onMounted(async () => {
   loading.value = true;
@@ -167,87 +246,94 @@ const searchOther = async () => {
 };
 </script>
 <style lang="scss" scoped>
-.demand {
-  width: 1200px;
+.achievement {
   padding: 20px;
   min-height: 423px;
+  background: rgb(248, 248, 248);
+
   .one {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 0 10px 0;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
 
-    .left {
+    .one_1 {
       display: flex;
       align-items: center;
+      padding: 10px 0;
+      border-bottom: #9d9898 1px dashed;
 
-      span {
-        font-size: 20px;
-        color: #333;
-        font-weight: bold;
-        margin: 0 0 0 5px;
+      .left {
+        text-align: center;
       }
 
-      .image {
-        width: 40px;
-        height: 40px;
-      }
-    }
+      .right {
+        .title {
+          color: #666;
+          font-size: 14px;
+          line-height: 15px;
+          margin: 0 10px;
+          display: inline-block;
+          overflow: hidden;
+          text-decoration: none;
+        }
 
-    .right {
-      text-align: right;
-      font-size: 12px;
-    }
-    .right:hover {
-      color: #2374ff;
+        .title:hover {
+          color: #2374ff;
+        }
+      }
     }
   }
 
   .two {
-    width: 100%;
+    margin-top: 20px;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
 
-    .two_1 {
-      display: flex;
-      justify-content: center;
-      height: 50px;
-      background-image: linear-gradient(#dbebf8, #fafafa);
-      line-height: 50px;
-      color: #333;
-      font-size: 16px;
-
-      .title {
-        text-align: center;
+    .list {
+      margin-bottom: 30px;
+      border-bottom: 1px solid #ebebeb;
+      padding-bottom: 10px;
+      background: url(/src/assets/achieve.png) right bottom no-repeat;
+      background-size: contain;
+
+      .name {
+        color: #337ab7;
+        font-size: 18px;
+        font-weight: bold;
+        display: inline-block;
+        margin: 10px 0;
       }
-    }
 
-    .two_2 {
-      max-height: 300px;
-      overflow: hidden;
-      border: 1px solid #b2c1ff;
-
-      .list {
-        display: flex;
-        justify-content: center;
-        height: 50px;
-        line-height: 50px;
-        font-size: 16px;
-        color: #666;
-        background: #fff;
+      .name:hover {
+        color: #2374ff;
+      }
 
-        .content {
-          text-align: center;
+      .other {
+        padding: 5px 0;
+
+        .other_1 {
+          font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial, sans-serif;
+          font-size: 12px;
+          font-weight: normal;
         }
 
-        .content:hover {
+        .other_1:hover {
           color: #2374ff;
         }
       }
 
-      .list:nth-child(2n) {
-        background: #f4f4f4;
+      .brief {
+        line-height: 30px;
+        color: #666;
+        font-size: 14px;
       }
     }
   }
+  .thr {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 20px;
+  }
 }
 </style>

src/views/home/components/home.vue

@@ -0,0 +1,42 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one">系统首页</el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 基础
+import type { Ref } from 'vue';
+import { onMounted, ref } from 'vue';
+
+// 接口
+// import { ToolsStore } from '@/stores/tool';
+// import type { IQueryResult } from '@/util/types.util';
+// const toolsAxios = ToolsStore();
+
+// 加载中
+const loading: Ref<any> = ref(false);
+const info: Ref<any> = ref({});
+
+// 请求
+onMounted(async () => {
+  loading.value = true;
+  search();
+  loading.value = false;
+});
+const search = async () => {
+//   let res: IQueryResult = await toolsAxios.dataCount();
+//   if (res.errcode == '0') {
+//     info.value = res.data;
+//   }
+};
+</script>
+<style scoped lang="scss">
+.main {
+  
+}
+</style>

src/views/home/components/transaction.vue

@@ -2,130 +2,159 @@
   <div id="transaction">
     <el-row>
       <el-col :span="24" class="transaction">
-        <a-tabs v-model:activeKey="activeKey" size="large" type="card">
-          <a-tab-pane key="1" tab="协议定价">
-            <a-list :grid="{ gutter: 16, column: 4 }" :data-source="oneList">
-              <template #renderItem="{ item }">
-                <el-col :span="24" class="list" @click="toView(item)">
-                  <el-tag v-if="item.status == '1'" type="success" round>自主挂牌</el-tag>
-                  <el-tag v-if="item.status == '2'" type="warning" round>线下拍卖</el-tag>
-                  <el-col :span="24" class="name textOver">
-                    <span class="font_5" :class="[item.status == '0' ? 'color0' : item.status == '1' ? 'color1' : 'color2']">●</span>
-                    <el-tooltip effect="dark" :content="item.name" placement="top">
-                      {{ item.name }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.unit">
-                    <span>依托单位:</span>
-                    {{ item.unit }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.service">
-                    <span>服务机构:</span>
-                    {{ item.service }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.no">
-                    <span>项目编号: </span>
-                    {{ item.no }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.number">
-                    <span>成果数量:</span>
-                    {{ item.number }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.notice_time">
-                    <span>公告时间:</span>
-                    {{ item.notice_time }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.end_time">
-                    <span>截上时间:</span>
-                    {{ item.end_time }}
-                  </el-col>
-                </el-col>
-              </template>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane key="2" tab="挂牌交易">
-            <a-list :grid="{ gutter: 16, column: 4 }" :data-source="twoList">
-              <template #renderItem="{ item }">
-                <el-col :span="24" class="list" @click="toView(item)">
-                  <el-tag v-if="item.status == '1'" type="success" round>自主挂牌</el-tag>
-                  <el-tag v-if="item.status == '2'" type="warning" round>线下拍卖</el-tag>
-                  <el-col :span="24" class="name textOver">
-                    <span class="font_5" :class="[item.status == '0' ? 'color0' : item.status == '1' ? 'color1' : 'color2']">●</span>
-                    <el-tooltip effect="dark" :content="item.name" placement="top">
-                      {{ item.name }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.unit">
-                    <span>依托单位:</span>
-                    {{ item.unit }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.service">
-                    <span>服务机构:</span>
-                    {{ item.service }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.no">
-                    <span>项目编号: </span>
-                    {{ item.no }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.number">
-                    <span>成果数量:</span>
-                    {{ item.number }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.notice_time">
-                    <span>公告时间:</span>
-                    {{ item.notice_time }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.end_time">
-                    <span>截上时间:</span>
-                    {{ item.end_time }}
-                  </el-col>
-                </el-col>
-              </template>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane key="3" tab="竞价(拍卖)">
-            <a-list :grid="{ gutter: 16, column: 4 }" :data-source="thrList">
-              <template #renderItem="{ item }">
-                <el-col :span="24" class="list" @click="toView(item)">
-                  <el-tag v-if="item.status == '1'" type="success" round>自主挂牌</el-tag>
-                  <el-tag v-if="item.status == '2'" type="warning" round>线下拍卖</el-tag>
-                  <el-col :span="24" class="name textOver">
-                    <span class="font_5" :class="[item.status == '0' ? 'color0' : item.status == '1' ? 'color1' : 'color2']">●</span>
-                    <el-tooltip effect="dark" :content="item.name" placement="top">
-                      {{ item.name }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.unit">
-                    <span>依托单位:</span>
-                    {{ item.unit }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.service">
-                    <span>服务机构:</span>
-                    {{ item.service }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.no">
-                    <span>项目编号: </span>
-                    {{ item.no }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.number">
-                    <span>成果数量:</span>
-                    {{ item.number }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.notice_time">
-                    <span>公告时间:</span>
-                    {{ item.notice_time }}
-                  </el-col>
-                  <el-col :span="24" class="other" v-if="item.end_time">
-                    <span>截上时间:</span>
-                    {{ item.end_time }}
-                  </el-col>
-                </el-col>
-              </template>
-            </a-list>
-          </a-tab-pane>
-        </a-tabs>
         <el-col :span="24" class="one">
-          <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
+          <el-carousel height="150px">
+            <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="two">
+          <div class="w_1200">
+            <a-tabs v-model:activeKey="activeKey" size="large" type="card">
+              <a-tab-pane key="1" tab="协议定价">
+                <a-list :grid="{ gutter: 16, column: 4 }" :data-source="oneList">
+                  <template #renderItem="{ item }">
+                    <el-col :span="24" class="list" @click="toView(item)">
+                      <span class="ltqiu qiu1"></span>
+                      <span class="rtqiu qiu1"></span>
+                      <span class="lbqiu qiu1"></span>
+                      <span class="rbqiu qiu1"></span>
+                      <el-tag v-if="item.status == '1'" type="success" round>自主挂牌</el-tag>
+                      <el-tag v-if="item.status == '2'" type="warning" round>线下拍卖</el-tag>
+                      <el-col :span="24" class="name textOver">
+                        <span class="font_5" :class="[item.status == '0' ? 'color0' : item.status == '1' ? 'color1' : 'color2']">●</span>
+                        <el-tooltip effect="dark" :content="item.name" placement="top">
+                          {{ item.name }}
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.unit">
+                        <span>依托单位:</span>
+                        {{ item.unit }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.service">
+                        <span>服务机构:</span>
+                        {{ item.service }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.no">
+                        <span>项目编号: </span>
+                        {{ item.no }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.number">
+                        <span>成果数量:</span>
+                        {{ item.number }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.notice_time">
+                        <span>公告时间:</span>
+                        {{ item.notice_time }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.end_time">
+                        <span>截上时间:</span>
+                        {{ item.end_time }}
+                      </el-col>
+                    </el-col>
+                  </template>
+                </a-list>
+              </a-tab-pane>
+              <a-tab-pane key="2" tab="挂牌交易">
+                <a-list :grid="{ gutter: 16, column: 4 }" :data-source="twoList">
+                  <template #renderItem="{ item }">
+                    <el-col :span="24" class="list" @click="toView(item)">
+                      <span class="ltqiu qiu2"></span>
+                      <span class="rtqiu qiu2"></span>
+                      <span class="lbqiu qiu2"></span>
+                      <span class="rbqiu qiu2"></span>
+                      <el-tag v-if="item.status == '1'" type="success" round>自主挂牌</el-tag>
+                      <el-tag v-if="item.status == '2'" type="warning" round>线下拍卖</el-tag>
+                      <el-col :span="24" class="name textOver">
+                        <span class="font_5" :class="[item.status == '0' ? 'color0' : item.status == '1' ? 'color1' : 'color2']">●</span>
+                        <el-tooltip effect="dark" :content="item.name" placement="top">
+                          {{ item.name }}
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.unit">
+                        <span>依托单位:</span>
+                        {{ item.unit }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.service">
+                        <span>服务机构:</span>
+                        {{ item.service }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.no">
+                        <span>项目编号: </span>
+                        {{ item.no }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.number">
+                        <span>成果数量:</span>
+                        {{ item.number }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.notice_time">
+                        <span>公告时间:</span>
+                        {{ item.notice_time }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.end_time">
+                        <span>截上时间:</span>
+                        {{ item.end_time }}
+                      </el-col>
+                    </el-col>
+                  </template>
+                </a-list>
+              </a-tab-pane>
+              <a-tab-pane key="3" tab="竞价(拍卖)">
+                <a-list :grid="{ gutter: 16, column: 4 }" :data-source="thrList">
+                  <template #renderItem="{ item }">
+                    <el-col :span="24" class="list" @click="toView(item)">
+                      <span class="ltqiu qiu3"></span>
+                      <span class="rtqiu qiu3"></span>
+                      <span class="lbqiu qiu3"></span>
+                      <span class="rbqiu qiu3"></span>
+                      <el-tag v-if="item.status == '1'" type="success" round>自主挂牌</el-tag>
+                      <el-tag v-if="item.status == '2'" type="warning" round>线下拍卖</el-tag>
+                      <el-col :span="24" class="name textOver">
+                        <span class="font_5" :class="[item.status == '0' ? 'color0' : item.status == '1' ? 'color1' : 'color2']">●</span>
+                        <el-tooltip effect="dark" :content="item.name" placement="top">
+                          {{ item.name }}
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.unit">
+                        <span>依托单位:</span>
+                        {{ item.unit }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.service">
+                        <span>服务机构:</span>
+                        {{ item.service }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.no">
+                        <span>项目编号: </span>
+                        {{ item.no }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.number">
+                        <span>成果数量:</span>
+                        {{ item.number }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.notice_time">
+                        <span>公告时间:</span>
+                        {{ item.notice_time }}
+                      </el-col>
+                      <el-col :span="24" class="other" v-if="item.end_time">
+                        <span>截上时间:</span>
+                        {{ item.end_time }}
+                      </el-col>
+                    </el-col>
+                  </template>
+                </a-list>
+              </a-tab-pane>
+            </a-tabs>
+            <el-col :span="24" class="two_1">
+              <a-pagination
+                v-model:page-size="limit"
+                show-size-changer
+                :page-size-options="pageSizeOptions"
+                :total="total"
+                @showSizeChange="onShowSizeChange"
+              />
+            </el-col>
+          </div>
         </el-col>
       </el-col>
     </el-row>
@@ -487,6 +516,8 @@ const thrList: Ref<any> = ref([
 let total: Ref<number> = ref(12);
 let skip = 0;
 let limit: number = proxy.$limit;
+const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
+const carouselList: Ref<any> = ref([{ url: '/src/assets/video_1.png' }, { url: '/src/assets/video_2.jpg' }, { url: '/src/assets/video_1.png' }]);
 // 请求
 onMounted(async () => {
   loading.value = true;
@@ -522,26 +553,32 @@ const onShowSizeChange = (current: number, pageSize: number) => {
 .transaction {
   min-height: 423px;
 
+  .one {
+    margin: 0 0 10px 0;
+  }
+
   :deep(.ant-tabs-content-holder) {
     padding-left: 70px;
   }
+
   :deep(.ant-row) {
     width: 100%;
   }
 
-  .one {
+  .two_1 {
     display: flex;
     flex-direction: row-reverse;
     padding: 20px;
   }
 
   .list {
+    position: relative;
     background: #fff;
+    border: 1px dashed #b4cffb;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
     border-radius: 2px;
     width: 300px;
     height: 220px;
-    margin-bottom: 30px;
     cursor: pointer;
     transition: all 0.3s;
     padding: 20px;
@@ -591,6 +628,50 @@ const onShowSizeChange = (current: number, pageSize: number) => {
         color: #8f97a3;
       }
     }
+
+    .ltqiu {
+      top: -10px;
+      left: -10px;
+    }
+
+    .rtqiu {
+      top: -10px;
+      right: -10px;
+    }
+
+    .lbqiu {
+      bottom: -10px;
+      left: -10px;
+    }
+
+    .rbqiu {
+      bottom: -10px;
+      right: -10px;
+    }
+
+    .qiu1 {
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      background: #e6a23c;
+      border-radius: 100%;
+    }
+
+    .qiu2 {
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      background: #2374ff;
+      border-radius: 100%;
+    }
+
+    .qiu3 {
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      background: #909399;
+      border-radius: 100%;
+    }
   }
 
   .list:hover {

src/views/home/index.vue

@@ -2,13 +2,14 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <cHead @selectMenu="selectMenu">
+        <cHead @selectMenu="selectMenu" :is_foot="is_foot" :is_head="is_head">
           <template v-slot:info>
-            <component v-show="current == 'tran'" :is="transaction"> </component>
-            <component v-show="current == 'achieve'" :is="achievement"> </component>
-            <component v-show="current == 'demand'" :is="demand"> </component>
-            <component v-show="current == 'service'" :is="service"> </component>
-            <component v-show="current == 'activity'" :is="activity"> </component>
+            <component v-if="current == 'home'" :is="home"> </component>
+            <component v-else-if="current == 'tran'" :is="transaction"> </component>
+            <component v-else-if="current == 'achieve'" :is="achievement"> </component>
+            <component v-else-if="current == 'demand'" :is="demand"> </component>
+            <component v-else-if="current == 'service'" :is="service"> </component>
+            <component v-else-if="current == 'activity'" :is="activity"> </component>
           </template>
         </cHead>
       </el-col>
@@ -25,6 +26,7 @@ import { onMounted, ref } from 'vue';
 // import type { IQueryResult } from '@/util/types.util'
 // const toolsAxios = ToolsStore();
 // 组件
+import home from './components/home.vue';
 import transaction from './components/transaction.vue';
 import achievement from './components/achievement.vue';
 import demand from './components/demand.vue';
@@ -34,6 +36,8 @@ import activity from './components/activity.vue';
 // 加载中
 const loading: Ref<any> = ref(false);
 const current: Ref<any> = ref('tran');
+const is_head: Ref<any> = ref(true);
+const is_foot: Ref<any> = ref(true);
 // 请求
 onMounted(async () => {
   loading.value = true;
@@ -48,6 +52,13 @@ const search = async () => {
 };
 // 菜单选择
 const selectMenu = async (item) => {
+  if (item.key == 'home') {
+    is_head.value = false;
+    is_foot.value = false;
+  } else {
+    is_head.value = true;
+    is_foot.value = true;
+  }
   current.value = item.key;
 };
 </script>

src/views/login/index.vue

@@ -2,79 +2,87 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <cHead :siteInfo="siteInfo"></cHead>
-        <el-col :span="24" class="two">
-          <div class="logo">
-            <el-image class="image" src="/src/assets/login.jpeg" fit="fill" />
-          </div>
-          <div class="loginform">
-            <el-col :span="24" class="tab">
-              <el-col :span="6" class="title" @click="toTab(0)" :class="[activeName == '0' ? 'tab0' : 'tab1']">个人登录</el-col>
-              <el-col :span="6" class="title" @click="toTab(1)" :class="[activeName == '1' ? 'tab0' : 'tab1']">法人登录</el-col>
-            </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '0'">
-              <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="60px" class="form" label-position="left">
-                <el-form-item label="账号" prop="account">
-                  <el-input v-model="form.account" placeholder="请输入账号">
-                    <template #prefix>
-                      <el-icon><User /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="密码" prop="password">
-                  <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-col :span="24" class="remark">
-                  <span>其他方式登录</span>
-                  <span>忘记密码?</span>
-                </el-col>
-                <el-col :span="24" class="button">
-                  <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
-                </el-col>
-                <el-col :span="24" class="agree">
-                  <span>登录即表示您同意</span><span @click="toRegister">《{{ siteInfo.zhTitle }}使用协议》</span>
+        <cHead :is_menu="false">
+          <template v-slot:info>
+            <el-col :span="24" class="two">
+              <div class="loginform">
+                <el-col :span="24" class="tab">
+                  <el-col :span="6" class="title" @click="toTab(0)" :class="[activeName == '0' ? 'tab0' : 'tab1']">个人登录</el-col>
+                  <el-col :span="6" class="title" @click="toTab(1)" :class="[activeName == '1' ? 'tab0' : 'tab1']">法人登录</el-col>
                 </el-col>
-                <el-col :span="24" class="other"><span>还没有账号?</span> &nbsp; &nbsp;<span @click="toRegister">去注册</span></el-col>
-              </el-form>
-            </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '1'">
-              <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="60px" class="form" label-position="left">
-                <el-form-item label="账号" prop="account">
-                  <el-input v-model="form.account" placeholder="请输入账号">
-                    <template #prefix>
-                      <el-icon><User /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="密码" prop="password">
-                  <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-col :span="24" class="remark">
-                  <span>其他方式登录</span>
-                  <span>忘记密码?</span>
-                </el-col>
-                <el-col :span="24" class="button">
-                  <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
+                <el-col :span="24" class="content" v-show="activeName == '0'">
+                  <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="60px" class="form" label-position="left">
+                    <el-form-item label="账号" prop="account">
+                      <el-input v-model="form.account" placeholder="请输入账号">
+                        <template #prefix>
+                          <el-icon>
+                            <User />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="密码" prop="password">
+                      <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-col :span="24" class="remark">
+                      <span>其他方式登录</span>
+                      <span>忘记密码?</span>
+                    </el-col>
+                    <el-col :span="24" class="button">
+                      <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
+                    </el-col>
+                    <el-col :span="24" class="agree">
+                      <span>登录即表示您同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+                    </el-col>
+                    <el-col :span="24" class="other"><span>还没有账号?</span>&nbsp;&nbsp;<span @click="toRegister">去注册</span></el-col>
+                  </el-form>
                 </el-col>
-                <el-col :span="24" class="agree">
-                  <span>登录即表示您同意</span><span @click="toRegister">《{{ siteInfo.zhTitle }}使用协议》</span>
+                <el-col :span="24" class="content" v-show="activeName == '1'">
+                  <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="60px" class="form" label-position="left">
+                    <el-form-item label="账号" prop="account">
+                      <el-input v-model="form.account" placeholder="请输入账号">
+                        <template #prefix>
+                          <el-icon>
+                            <User />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="密码" prop="password">
+                      <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-col :span="24" class="remark">
+                      <span>其他方式登录</span>
+                      <span>忘记密码?</span>
+                    </el-col>
+                    <el-col :span="24" class="button">
+                      <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
+                    </el-col>
+                    <el-col :span="24" class="agree">
+                      <span>登录即表示您同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+                    </el-col>
+                    <el-col :span="24" class="other"><span>还没有账号?</span> &nbsp; &nbsp;<span @click="toRegister">去注册</span></el-col>
+                  </el-form>
                 </el-col>
-                <el-col :span="24" class="other"><span>还没有账号?</span> &nbsp; &nbsp;<span @click="toRegister">去注册</span></el-col>
-              </el-form>
+              </div>
             </el-col>
-          </div>
-        </el-col>
-        <cFoot></cFoot>
+          </template>
+        </cHead>
       </el-col>
     </el-row>
+    <el-dialog v-model="dialog" title="使用协议">使用协议</el-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -82,7 +90,7 @@
 import type { Ref } from 'vue';
 import { onMounted, ref, reactive } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { siteInfo } from '@/layout/site';
 // // 接口
 // import { ToolsStore } from '@/stores/tool';
@@ -90,9 +98,9 @@ import { siteInfo } from '@/layout/site';
 // const toolsAxios = ToolsStore();
 // 路由
 const router = useRouter();
-const route = useRoute();
 // 加载中
 const loading: Ref<any> = ref(false);
+const dialog = ref(false);
 const form: Ref<any> = ref({});
 interface RuleForm {
   account: string;
@@ -111,7 +119,6 @@ onMounted(async () => {
   loading.value = false;
 });
 const search = async () => {
-  activeName.value = route.query.status || '0';
   // let res: IQueryResult = await toolsAxios.dataCount();
   // if (res.errcode == '0') {
   //     info.value = res.data;
@@ -140,34 +147,32 @@ const toRegister = () => {
 <style scoped lang="scss">
 .main {
   .two {
-    background-image: url(/src/assets/loginbg.jpg);
+    background-image: url(/src/assets/loginbg.jpeg);
     background-position: center center;
     background-repeat: no-repeat;
-    height: 500px;
+    height: 590px;
     width: 100%;
     background-size: cover;
     display: flex;
     justify-content: space-evenly;
-    .logo {
-      margin: 50px 0px 0px 0;
-      height: 420px;
-      opacity: 0.8;
-      .image {
-        width: 100%;
-        height: 100%;
-      }
-    }
+
     .loginform {
-      margin: 50px 0 0 0;
-      padding: 20px 0 0 0;
-      width: 380px;
-      height: 400px;
-      background-color: #ffffff;
-      border-radius: 3px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      height: 380px;
+      padding: 20px 85px;
+      background: hsla(0, 0%, 100%, 0.6);
+      box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      border-top: 10px solid #1492ff;
+
       .tab {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .title {
           text-align: center;
           margin: 0 40px;
@@ -177,12 +182,14 @@ const toRegister = () => {
           line-height: 32px;
           font-weight: bold;
         }
+
         .tab0 {
           color: #1492ff;
           border-bottom: 2px solid;
           border-bottom-color: #1492ff;
           padding-bottom: 10px;
         }
+
         .tab1 {
           color: #333333;
           padding-bottom: 10px;
@@ -191,9 +198,11 @@ const toRegister = () => {
 
       .content {
         margin: 35px 50px 0px;
+
         .remark {
           display: flex;
           justify-content: space-between;
+
           span {
             cursor: pointer;
             font-family: PingFangSC-Regular;
@@ -203,14 +212,17 @@ const toRegister = () => {
             text-align: right;
             line-height: 32px;
           }
+
           span:hover {
             color: #2374ff;
           }
         }
+
         .button {
           padding: 10px 0;
+
           :deep(.el-button) {
-            width: 285px !important;
+            width: 100% !important;
             height: 44px !important;
             border: 0 !important;
             color: #f8f8f8 !important;
@@ -222,19 +234,23 @@ const toRegister = () => {
             background-color: #1492ff !important;
           }
         }
+
         .agree {
-          padding: 0 0 40px 0;
+          padding: 0 0 30px 0;
           color: #999;
           font-size: 12px;
+
           span:last-child {
             color: #2374ff;
           }
         }
+
         .other {
           text-align: center;
           font-family: PingFangSC-Regular;
           font-size: 14px;
           color: #333333;
+
           span:last-child {
             color: #2374ff;
           }

src/views/policy/detail.vue

@@ -2,19 +2,22 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <div class="span">{{ info.title || '暂无标题' }}</div>
-          </el-col>
-          <el-col :span="24" class="two">
-            <el-col :span="4" class="two_1"> <span>来源：</span>{{ info.source || '暂无' }} </el-col>
-            <el-col :span="4" class="two_1"> <span>发布时间：</span>{{ info.time || '暂无' }} </el-col>
-          </el-col>
-          <el-col :span="24" class="thr">
-            {{ info.brief || '暂无' }}
-          </el-col>
-        </div>
-        <cFoot style="background-color: #2e3546; color: #f0f2f5"></cFoot>
+        <cHead :is_menu="false">
+          <template v-slot:info>
+            <div class="w_1200">
+              <el-col :span="24" class="one">
+                <div class="span">{{ info.title || '暂无标题' }}</div>
+              </el-col>
+              <el-col :span="24" class="two">
+                <el-col :span="4" class="two_1"> <span>来源：</span>{{ info.source || '暂无' }} </el-col>
+                <el-col :span="4" class="two_1"> <span>发布时间：</span>{{ info.time || '暂无' }} </el-col>
+              </el-col>
+              <el-col :span="24" class="thr">
+                {{ info.brief || '暂无' }}
+              </el-col>
+            </div>
+          </template>
+        </cHead>
       </el-col>
     </el-row>
   </div>
@@ -70,9 +73,6 @@ const searchOther = async () => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
   .one {
     font-size: 24px;
     font-weight: 700;

src/views/policy/index.vue

@@ -2,43 +2,52 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <el-tabs v-model="activeName" @tab-click="handleClick" v-if="type == 0">
-              <el-tab-pane label="全部" name="0"></el-tab-pane>
-              <el-tab-pane label="全国" name="1"></el-tab-pane>
-              <el-tab-pane label="省内" name="2"></el-tab-pane>
-            </el-tabs>
-            <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
-              <el-tab-pane label="行业动态" name="0"></el-tab-pane>
-              <el-tab-pane label="科技成果" name="1"></el-tab-pane>
-            </el-tabs>
-          </el-col>
-          <el-col :span="24" class="two">
-            <a-list item-layout="horizontal" :data-source="list">
-              <template #renderItem="{ item }">
-                <a-list-item class="list" @click="toView(item)">
-                  <el-col :span="2" class="time">
-                    <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
-                    <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
-                  </el-col>
-                  <el-col :span="22" class="other">
-                    <el-col :span="24" class="name textOver">
-                      <el-tooltip effect="dark" :content="item.title" placement="top">
-                        {{ item.title || '暂无标题' }}
-                      </el-tooltip>
-                    </el-col>
-                    <el-col :span="24" class="two_1"> <span>来源: </span>{{ item.content || '来源' }} </el-col>
-                  </el-col>
-                </a-list-item>
-              </template>
-            </a-list>
-          </el-col>
-          <el-col :span="24" class="thr">
-            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total"
-              @showSizeChange="onShowSizeChange" />
-          </el-col>
-        </div>
+        <cHead :is_menu="false">
+          <template v-slot:info>
+            <div class="w_1200">
+              <el-col :span="24" class="one">
+                <el-tabs v-model="activeName" @tab-click="handleClick" v-if="type == 0">
+                  <el-tab-pane label="全部" name="0"></el-tab-pane>
+                  <el-tab-pane label="全国" name="1"></el-tab-pane>
+                  <el-tab-pane label="省内" name="2"></el-tab-pane>
+                </el-tabs>
+                <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
+                  <el-tab-pane label="行业动态" name="0"></el-tab-pane>
+                  <el-tab-pane label="科技成果" name="1"></el-tab-pane>
+                </el-tabs>
+              </el-col>
+              <el-col :span="24" class="two">
+                <a-list item-layout="horizontal" :data-source="list">
+                  <template #renderItem="{ item }">
+                    <a-list-item class="list" @click="toView(item)">
+                      <el-col :span="2" class="time">
+                        <div class="year" v-if="item.time">{{ moment(item.time).format('YYYY') }}</div>
+                        <div class="date" v-if="item.time">{{ moment(item.time).format('MM-DD') }}</div>
+                      </el-col>
+                      <el-col :span="22" class="other">
+                        <el-col :span="24" class="name textOver">
+                          <el-tooltip effect="dark" :content="item.title" placement="top">
+                            {{ item.title || '暂无标题' }}
+                          </el-tooltip>
+                        </el-col>
+                        <el-col :span="24" class="two_1"> <span>来源: </span>{{ item.content || '来源' }} </el-col>
+                      </el-col>
+                    </a-list-item>
+                  </template>
+                </a-list>
+              </el-col>
+              <el-col :span="24" class="thr">
+                <a-pagination
+                  v-model:page-size="limit"
+                  show-size-changer
+                  :page-size-options="pageSizeOptions"
+                  :total="total"
+                  @showSizeChange="onShowSizeChange"
+                />
+              </el-col>
+            </div>
+          </template>
+        </cHead>
       </el-col>
     </el-row>
   </div>
@@ -179,9 +188,6 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
   .two {
     .list:hover {
       box-shadow: 0 0 16px rgba(35, 116, 255, 0.6);

src/views/register/index.vue

@@ -2,235 +2,283 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <cHead :siteInfo="siteInfo"></cHead>
-        <el-col :span="24" class="two">
-          <div class="logo">
-            <el-image class="image" src="/src/assets/login.jpeg" fit="fill" />
-          </div>
-          <div class="loginform">
-            <el-col :span="24" class="tab">
-              <el-col :span="5" class="title" @click="toTab(0)" :class="[activeName == '0' ? 'tab0' : 'tab1']">个人用户</el-col>
-              <el-col :span="5" class="title" @click="toTab(1)" :class="[activeName == '1' ? 'tab0' : 'tab1']">企业用户</el-col>
-              <el-col :span="5" class="title" @click="toTab(2)" :class="[activeName == '2' ? 'tab0' : 'tab1']">科研单位</el-col>
-            </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '0'">
-              <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
-                <el-form-item label="账号" prop="account">
-                  <el-input v-model="form.account" placeholder="请输入账号">
-                    <template #prefix>
-                      <el-icon><User /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="用户名" prop="nick_name">
-                  <el-input v-model="form.nick_name" placeholder="请输入用户名">
-                    <template #prefix>
-                      <el-icon><Avatar /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="工作单位" prop="unit">
-                  <el-input v-model="form.tel" placeholder="请输入工作单位">
-                    <template #prefix>
-                      <el-icon><OfficeBuilding /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="联系电话" prop="tel">
-                  <el-input v-model="form.tel" placeholder="请输入联系电话">
-                    <template #prefix>
-                      <el-icon><Iphone /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="身份证号" prop="id_card">
-                  <el-input v-model="form.id_card" placeholder="请输入身份证号">
-                    <template #prefix>
-                      <el-icon><ScaleToOriginal /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="联系邮箱" prop="email">
-                  <el-input v-model="form.email" placeholder="请输入联系邮箱">
-                    <template #prefix>
-                      <el-icon><Message /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="密码" prop="password">
-                  <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="确认密码" prop="refpassword">
-                  <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-col :span="24" class="remark">
-                  <span @click="toLogin">已有账号去登录</span>
-                  <span @click="toBack">返回首页</span>
-                </el-col>
-                <el-col :span="24" class="button">
-                  <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
-                </el-col>
-                <el-col :span="24" class="agree">
-                  <el-checkbox v-model="isAgree"></el-checkbox>
-                  <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="toRegister">《{{ siteInfo.zhTitle }}使用协议》</span>
-                </el-col>
-              </el-form>
-            </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '1'">
-              <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
-                <el-form-item label="账号" prop="account">
-                  <el-input v-model="form.account" placeholder="请输入账号">
-                    <template #prefix>
-                      <el-icon><User /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="用户名" prop="nick_name">
-                  <el-input v-model="form.nick_name" placeholder="请输入用户名">
-                    <template #prefix>
-                      <el-icon><Avatar /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="工作单位" prop="unit">
-                  <el-input v-model="form.tel" placeholder="请输入工作单位">
-                    <template #prefix>
-                      <el-icon><OfficeBuilding /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="联系电话" prop="tel">
-                  <el-input v-model="form.tel" placeholder="请输入联系电话">
-                    <template #prefix>
-                      <el-icon><Iphone /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="身份证号" prop="id_card">
-                  <el-input v-model="form.id_card" placeholder="请输入身份证号">
-                    <template #prefix>
-                      <el-icon><ScaleToOriginal /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="联系邮箱" prop="email">
-                  <el-input v-model="form.email" placeholder="请输入联系邮箱">
-                    <template #prefix>
-                      <el-icon><Message /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="密码" prop="password">
-                  <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="确认密码" prop="refpassword">
-                  <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-col :span="24" class="remark">
-                  <span @click="toLogin">已有账号去登录</span>
-                  <span @click="toBack">返回首页</span>
-                </el-col>
-                <el-col :span="24" class="button">
-                  <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+        <cHead :is_menu="false">
+          <template v-slot:info>
+            <el-col :span="24" class="two">
+              <div class="loginform">
+                <el-col :span="24" class="tab">
+                  <el-col :span="5" class="title" @click="toTab(0)" :class="[activeName == '0' ? 'tab0' : 'tab1']">个人用户</el-col>
+                  <el-col :span="5" class="title" @click="toTab(1)" :class="[activeName == '1' ? 'tab0' : 'tab1']">企业用户</el-col>
+                  <el-col :span="5" class="title" @click="toTab(2)" :class="[activeName == '2' ? 'tab0' : 'tab1']">科研单位</el-col>
                 </el-col>
-                <el-col :span="24" class="agree">
-                  <el-checkbox v-model="isAgree"></el-checkbox>
-                  <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="toRegister">《{{ siteInfo.zhTitle }}使用协议》</span>
+                <el-col :span="24" class="content" v-show="activeName == '0'">
+                  <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
+                    <el-form-item label="账号" prop="account">
+                      <el-input v-model="form.account" placeholder="请输入账号">
+                        <template #prefix>
+                          <el-icon>
+                            <User />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="用户名" prop="nick_name">
+                      <el-input v-model="form.nick_name" placeholder="请输入用户名">
+                        <template #prefix>
+                          <el-icon>
+                            <Avatar />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="工作单位" prop="unit">
+                      <el-input v-model="form.tel" placeholder="请输入工作单位">
+                        <template #prefix>
+                          <el-icon>
+                            <OfficeBuilding />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="联系电话" prop="tel">
+                      <el-input v-model="form.tel" placeholder="请输入联系电话">
+                        <template #prefix>
+                          <el-icon>
+                            <Iphone />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="身份证号" prop="id_card">
+                      <el-input v-model="form.id_card" placeholder="请输入身份证号">
+                        <template #prefix>
+                          <el-icon>
+                            <ScaleToOriginal />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="联系邮箱" prop="email">
+                      <el-input v-model="form.email" placeholder="请输入联系邮箱">
+                        <template #prefix>
+                          <el-icon>
+                            <Message />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="密码" prop="password">
+                      <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="确认密码" prop="refpassword">
+                      <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-col :span="24" class="remark">
+                      <span @click="toLogin">已有账号去登录</span>
+                      <span @click="toBack">返回首页</span>
+                    </el-col>
+                    <el-col :span="24" class="button">
+                      <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+                    </el-col>
+                    <el-col :span="24" class="agree">
+                      <el-checkbox v-model="isAgree"></el-checkbox>
+                      <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+                    </el-col>
+                  </el-form>
                 </el-col>
-              </el-form>
-            </el-col>
-            <el-col :span="24" class="content" v-show="activeName == '2'">
-              <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
-                <el-form-item label="账号" prop="account">
-                  <el-input v-model="form.account" placeholder="请输入账号">
-                    <template #prefix>
-                      <el-icon><User /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="用户名" prop="nick_name">
-                  <el-input v-model="form.nick_name" placeholder="请输入用户名">
-                    <template #prefix>
-                      <el-icon><Avatar /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="工作单位" prop="unit">
-                  <el-input v-model="form.tel" placeholder="请输入工作单位">
-                    <template #prefix>
-                      <el-icon><OfficeBuilding /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="联系电话" prop="tel">
-                  <el-input v-model="form.tel" placeholder="请输入联系电话">
-                    <template #prefix>
-                      <el-icon><Iphone /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="身份证号" prop="id_card">
-                  <el-input v-model="form.id_card" placeholder="请输入身份证号">
-                    <template #prefix>
-                      <el-icon><ScaleToOriginal /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="联系邮箱" prop="email">
-                  <el-input v-model="form.email" placeholder="请输入联系邮箱">
-                    <template #prefix>
-                      <el-icon><Message /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="密码" prop="password">
-                  <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="确认密码" prop="refpassword">
-                  <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
-                    <template #prefix>
-                      <el-icon><Unlock /></el-icon>
-                    </template>
-                  </el-input>
-                </el-form-item>
-                <el-col :span="24" class="remark">
-                  <span @click="toLogin">已有账号去登录</span>
-                  <span @click="toBack">返回首页</span>
-                </el-col>
-                <el-col :span="24" class="button">
-                  <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+                <el-col :span="24" class="content" v-show="activeName == '1'">
+                  <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
+                    <el-form-item label="账号" prop="account">
+                      <el-input v-model="form.account" placeholder="请输入账号">
+                        <template #prefix>
+                          <el-icon>
+                            <User />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="用户名" prop="nick_name">
+                      <el-input v-model="form.nick_name" placeholder="请输入用户名">
+                        <template #prefix>
+                          <el-icon>
+                            <Avatar />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="工作单位" prop="unit">
+                      <el-input v-model="form.tel" placeholder="请输入工作单位">
+                        <template #prefix>
+                          <el-icon>
+                            <OfficeBuilding />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="联系电话" prop="tel">
+                      <el-input v-model="form.tel" placeholder="请输入联系电话">
+                        <template #prefix>
+                          <el-icon>
+                            <Iphone />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="身份证号" prop="id_card">
+                      <el-input v-model="form.id_card" placeholder="请输入身份证号">
+                        <template #prefix>
+                          <el-icon>
+                            <ScaleToOriginal />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="联系邮箱" prop="email">
+                      <el-input v-model="form.email" placeholder="请输入联系邮箱">
+                        <template #prefix>
+                          <el-icon>
+                            <Message />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="密码" prop="password">
+                      <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="确认密码" prop="refpassword">
+                      <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-col :span="24" class="remark">
+                      <span @click="toLogin">已有账号去登录</span>
+                      <span @click="toBack">返回首页</span>
+                    </el-col>
+                    <el-col :span="24" class="button">
+                      <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+                    </el-col>
+                    <el-col :span="24" class="agree">
+                      <el-checkbox v-model="isAgree"></el-checkbox>
+                      <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+                    </el-col>
+                  </el-form>
                 </el-col>
-                <el-col :span="24" class="agree">
-                  <el-checkbox v-model="isAgree"></el-checkbox>
-                  <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="toRegister">《{{ siteInfo.zhTitle }}使用协议》</span>
+                <el-col :span="24" class="content" v-show="activeName == '2'">
+                  <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="80px" class="form" label-position="left">
+                    <el-form-item label="账号" prop="account">
+                      <el-input v-model="form.account" placeholder="请输入账号">
+                        <template #prefix>
+                          <el-icon>
+                            <User />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="用户名" prop="nick_name">
+                      <el-input v-model="form.nick_name" placeholder="请输入用户名">
+                        <template #prefix>
+                          <el-icon>
+                            <Avatar />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="工作单位" prop="unit">
+                      <el-input v-model="form.tel" placeholder="请输入工作单位">
+                        <template #prefix>
+                          <el-icon>
+                            <OfficeBuilding />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="联系电话" prop="tel">
+                      <el-input v-model="form.tel" placeholder="请输入联系电话">
+                        <template #prefix>
+                          <el-icon>
+                            <Iphone />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="身份证号" prop="id_card">
+                      <el-input v-model="form.id_card" placeholder="请输入身份证号">
+                        <template #prefix>
+                          <el-icon>
+                            <ScaleToOriginal />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="联系邮箱" prop="email">
+                      <el-input v-model="form.email" placeholder="请输入联系邮箱">
+                        <template #prefix>
+                          <el-icon>
+                            <Message />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="密码" prop="password">
+                      <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="确认密码" prop="refpassword">
+                      <el-input v-model="form.refpassword" type="password" show-password placeholder="请再次确认输入密码">
+                        <template #prefix>
+                          <el-icon>
+                            <Unlock />
+                          </el-icon>
+                        </template>
+                      </el-input>
+                    </el-form-item>
+                    <el-col :span="24" class="remark">
+                      <span @click="toLogin">已有账号去登录</span>
+                      <span @click="toBack">返回首页</span>
+                    </el-col>
+                    <el-col :span="24" class="button">
+                      <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+                    </el-col>
+                    <el-col :span="24" class="agree">
+                      <el-checkbox v-model="isAgree"></el-checkbox>
+                      <span style="margin: 0 0 0 5px">我已阅读并同意</span><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+                    </el-col>
+                  </el-form>
                 </el-col>
-              </el-form>
+              </div>
             </el-col>
-          </div>
-        </el-col>
-        <cFoot></cFoot>
+          </template>
+        </cHead>
       </el-col>
     </el-row>
+    <el-dialog v-model="dialog" title="使用协议">使用协议</el-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -249,6 +297,7 @@ const router = useRouter();
 // 加载中
 const loading: Ref<any> = ref(false);
 const form: Ref<any> = ref({});
+const dialog = ref(false);
 interface RuleForm {
   account: string;
   password: string;
@@ -299,34 +348,32 @@ const toBack = () => {
 <style scoped lang="scss">
 .main {
   .two {
-    background-image: url(/src/assets/loginbg.jpg);
+    background-image: url(/src/assets/loginbg.jpeg);
     background-position: center center;
     background-repeat: no-repeat;
-    height: 500px;
+    height: 590px;
     width: 100%;
     background-size: cover;
     display: flex;
     justify-content: space-evenly;
-    .logo {
-      margin: 50px 0px 0px 0;
-      height: 420px;
-      opacity: 0.8;
-      .image {
-        width: 100%;
-        height: 100%;
-      }
-    }
+
     .loginform {
-      margin: 50px 0 0 0;
-      padding: 20px 0 0 0;
-      width: 380px;
-      height: 422px;
-      background-color: #ffffff;
-      border-radius: 3px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      height: 460px;
+      padding: 20px 85px;
+      background: hsla(0, 0%, 100%, 0.6);
+      box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      border-top: 10px solid #1492ff;
+
       .tab {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .title {
           text-align: center;
           margin: 0 20px;
@@ -336,12 +383,14 @@ const toBack = () => {
           line-height: 30px;
           font-weight: bold;
         }
+
         .tab0 {
           color: #1492ff;
           border-bottom: 2px solid;
           border-bottom-color: #1492ff;
           padding-bottom: 10px;
         }
+
         .tab1 {
           color: #333333;
           padding-bottom: 10px;
@@ -350,11 +399,13 @@ const toBack = () => {
 
       .content {
         margin: 30px 30px 0 30px;
-        height: 310px;
+        height: 340px;
         overflow-y: auto;
+
         .remark {
           display: flex;
           justify-content: space-between;
+
           span {
             cursor: pointer;
             font-family: PingFangSC-Regular;
@@ -364,14 +415,17 @@ const toBack = () => {
             text-align: right;
             line-height: 32px;
           }
+
           span:hover {
             color: #2374ff;
           }
         }
+
         .button {
           padding: 10px 0;
+
           :deep(.el-button) {
-            width: 318px !important;
+            width: 100% !important;
             height: 44px !important;
             border: 0 !important;
             color: #f8f8f8 !important;
@@ -383,15 +437,20 @@ const toBack = () => {
             background-color: #1492ff !important;
           }
         }
+
         .agree {
+          display: flex;
+          align-items: center;
           padding: 0 0 40px 0;
           color: #999;
           font-size: 12px;
+
           span:last-child {
             color: #2374ff;
           }
         }
       }
+
       .content::-webkit-scrollbar {
         display: none;
       }

src/views/service/detail.vue

@@ -2,10 +2,10 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <cHead>
+        <cHead :is_menu="false">
           <template v-slot:info>
             <div class="w_1200">
-              <el-row style="margin: 20px 0 0 0;">
+              <el-row style="margin: 20px 0 0 0">
                 <el-col :span="8" class="image">
                   <el-image class="images" :src="info.url" fit="fill" />
                 </el-col>
@@ -23,7 +23,7 @@
                     <el-row :span="24" class="one_2"> 科技保险,科技担保,知识产权质押 </el-row>
                   </el-col>
                   <el-col :span="24" class="two">
-                    <a-descriptions bordered title="简介">
+                    <a-descriptions bordered>
                       <a-descriptions-item label="服务领域">
                         电子信息、先进制造、城市建设与社会发展、新材料及其应用、生物、医药和医疗器械、新能源与高效、现代交通、环境保护与资源综合利用</a-descriptions-item>
                       <a-descriptions-item label="服务方式">服务方式</a-descriptions-item>
@@ -34,7 +34,9 @@
                 </el-col>
               </el-row>
               <el-col :span="24" class="thr">
-                <el-col :span="24" class="thr_1">单位信息</el-col>
+                <el-col :span="24" class="thr_1">
+                  <p>单位信息</p>
+                </el-col>
                 <el-row :span="24" class="thr_2">
                   <el-col :span="17" class="left">
                     <el-col :span="24" class="name">
@@ -56,9 +58,10 @@
               </el-col>
               <a-divider />
               <el-col :span="24" class="four">
-                <a-tabs>
-                  <a-tab-pane tab="详情描述">{{ info.brief || '暂无' }}</a-tab-pane>
-                </a-tabs>
+                <el-col :span="24" class="four_1">
+                  <p>详情描述</p>
+                </el-col>
+                <el-col :span="24" class="four_2">{{ info.brief || '暂无' }}</el-col>
               </el-col>
             </div>
           </template>
@@ -121,9 +124,6 @@ const searchOther = async () => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-
   .image {
     width: 100%;
     height: 450px;
@@ -138,7 +138,7 @@ const searchOther = async () => {
     margin: 10px 0;
 
     .one_1 {
-      margin: 5px 0;
+      margin: 10px;
 
       .title {
         font-size: 18px;
@@ -185,10 +185,22 @@ const searchOther = async () => {
     margin: 0 0 10px 0;
 
     .thr_1 {
-      margin-bottom: 20px;
-      font-size: 18px;
-      font-weight: 700;
-      color: #383b40;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      border-bottom: 2px solid #2374ff;
+      margin: 20px 0;
+      background: #f7f7f7;
+
+      p {
+        float: left;
+        padding: 0 20px;
+        height: 40px;
+        border-bottom: 2px solid #2374ff;
+        color: #fff;
+        font-size: 18px;
+        background: #2374ff;
+      }
     }
 
     .thr_2 {
@@ -241,6 +253,25 @@ const searchOther = async () => {
 
   .four {
     margin: 0 0 10px 0;
+
+    .four_1 {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      border-bottom: 2px solid #2374ff;
+      margin: 20px 0;
+      background: #f7f7f7;
+
+      p {
+        float: left;
+        padding: 0 20px;
+        height: 40px;
+        border-bottom: 2px solid #2374ff;
+        color: #fff;
+        font-size: 18px;
+        background: #2374ff;
+      }
+    }
   }
 }
 </style>

src/views/service/index.vue

@@ -2,34 +2,56 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch"> </cSearch>
-          </el-col>
-          <el-col :span="24" class="two">
-            <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="list">
-              <template #renderItem="{ item }">
-                <el-col :span="24" class="list" @click="toView(item)">
-                  <el-col :span="24" class="top">
-                    <el-image class="image" :src="item.url" fit="fill" />
+        <cHead :is_menu="false" :is_head="false">
+          <template v-slot:info>
+            <div class="w_1200">
+              <el-col :span="24" class="one">
+                <el-row class="one_1">
+                  <el-col :span="2" class="left">服务类型</el-col>
+                  <el-col :span="22" class="right">
+                    <a-button class="title" v-for="(item, index) in typeList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
                   </el-col>
-                  <el-col :span="24" class="bottom">
-                    <el-col :span="24" class="name textOver">
-                      <el-tooltip effect="dark" :content="item.name" placement="top">
-                        {{ item.name || '暂无名称' }}
-                      </el-tooltip>
-                    </el-col>
-                    <el-col :span="24" class="two_1"> <span>机构名称: </span>{{ item.unit || '暂无机构名称' }} </el-col>
-                    <el-col :span="24" class="two_1"> <span>地区: </span>{{ item.city || '暂无地区' }} </el-col>
+                </el-row>
+                <el-row class="one_1">
+                  <el-col :span="2" class="left">服务方式</el-col>
+                  <el-col :span="22" class="right">
+                    <a-button class="title" v-for="(item, index) in matureList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
+                  </el-col>
+                </el-row>
+                <el-row class="one_1">
+                  <el-col :span="2" class="left">服务地区</el-col>
+                  <el-col :span="22" class="right">
+                    <a-button class="title" v-for="(item, index) in cityList" :key="index" type="link" size="samll">{{ item.label }}</a-button>
                   </el-col>
-                </el-col>
-              </template>
-            </a-list>
-          </el-col>
-          <el-col :span="24" class="thr">
-            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
-          </el-col>
-        </div>
+                </el-row>
+              </el-col>
+              <el-col :span="24" class="two">
+                <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="list">
+                  <template #renderItem="{ item }">
+                    <el-col :span="24" class="list" @click="toView(item)">
+                      <el-col :span="24" class="top">
+                        <el-image class="image" :src="item.url" fit="fill" />
+                      </el-col>
+                      <el-col :span="24" class="bottom">
+                        <el-col :span="24" class="name textOver">
+                          <el-tooltip effect="dark" :content="item.name" placement="top">
+                            {{ item.name || '暂无名称' }}
+                          </el-tooltip>
+                        </el-col>
+                        <el-col :span="24" class="two_1"> <span>机构名称: </span>{{ item.unit || '暂无机构名称' }} </el-col>
+                        <el-col :span="24" class="two_1"> <span>地区: </span>{{ item.city || '暂无地区' }} </el-col>
+                      </el-col>
+                    </el-col>
+                  </template>
+                </a-list>
+              </el-col>
+              <el-col :span="24" class="thr">
+                <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions"
+                  :total="total" @showSizeChange="onShowSizeChange" />
+              </el-col>
+            </div>
+          </template>
+        </cHead>
       </el-col>
     </el-row>
   </div>
@@ -121,10 +143,56 @@ let limit: number = proxy.$limit;
 const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
 // 查询数据
 let searchForm: Ref<any> = ref({});
-let fields: Ref<any[]> = ref([
-  { label: '服务类型', model: 'type', isSearch: true },
-  { label: '服务方式', model: 'label', isSearch: true },
-  { label: '服务地区', model: 'value', isSearch: true }
+const cityList: Ref<any> = ref([
+  { 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', 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', label: '云南省' }
+]);
+
+const matureList: Ref<any> = ref([
+  { value: '0', label: '上门服务' },
+  { value: '1', label: '远程服务' },
+  { value: '2', label: '直接对接' },
+  { value: '3', label: '报告交付' },
+  { value: '4', label: '许可转让' },
+  { value: '4', label: '完全转让' },
+  { value: '4', label: '技术入股' },
+  { value: '4', label: '合作开发' },
+  { value: '4', label: '其他' }
+]);
+
+const typeList: Ref<any> = ref([
+  { value: '0', label: '技术转移' },
+  { value: '1', label: '知识产权' },
+  { value: '2', label: '政策咨询/服务' },
+  { value: '0', label: '科技评估/评价' },
+  { value: '1', label: '工业设计' },
+  { value: '2', label: '科技金融' },
+  { value: '0', label: '财税法律' },
+  { value: '1', label: '检验检测' },
+  { value: '2', label: '创业孵化' },
+  { value: '2', label: '其他类型' }
 ]);
 // 请求
 onMounted(async () => {
@@ -163,9 +231,39 @@ const onShowSizeChange = (current: number, pageSize: number) => {
 </script>
 <style scoped lang="scss">
 .main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-  .one {}
+  .one {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+
+    .one_1 {
+      display: flex;
+      align-items: center;
+      padding: 10px 0;
+      border-bottom: #9d9898 1px dashed;
+
+      .left {
+        text-align: center;
+      }
+
+      .right {
+        .title {
+          color: #666;
+          font-size: 14px;
+          line-height: 15px;
+          margin: 0 10px;
+          display: inline-block;
+          overflow: hidden;
+          text-decoration: none;
+        }
+
+        .title:hover {
+          color: #2374ff;
+        }
+      }
+    }
+  }
+
 
   .two {
     .list {

src/views/trade/one.vue

@@ -1,280 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch"> </cSearch>
-          </el-col>
-          <el-col :span="24" class="two">
-            <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="list">
-              <template #renderItem="{ item }">
-                <el-col :span="24" class="list">
-                  <el-col :span="24" class="name textOver">
-                    <el-tooltip effect="dark" :content="item.name" placement="top">
-                      {{ item.name || '暂无名称' }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="two_1"> <span>服务机构: </span>{{ item.unit || '暂无服务机构' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>项目编号: </span>{{ item.no || '暂无项目编号' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>发布日期: </span>{{ item.notice_time || '暂无发布日期' }} </el-col>
-                  <el-col :span="24" class="bottom">
-                    <div class="status">挂牌公告</div>
-                    <div class="button" @click="toView">查看详情</div>
-                  </el-col>
-                </el-col>
-              </template>
-            </a-list>
-          </el-col>
-          <el-col :span="24" class="thr">
-            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
-          </el-col>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 基础
-import type { Ref } from 'vue';
-import { onMounted, getCurrentInstance, ref } from 'vue';
-import { useRouter } from 'vue-router';
-// 接口
-// import { ToolsStore } from '@/stores/tool';
-// import type { IQueryResult } from '@/util/types.util';
-// const toolsAxios = ToolsStore();
-const { proxy } = getCurrentInstance() as any;
-
-// 路由
-const router = useRouter();
-// 加载中
-const loading: Ref<any> = ref(false);
-let list: Ref<any> = ref([
-  {
-    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '数字矫形肢体骨骼康复机器辅助系统',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '常规早稻新品种“浙早33”的相关培育技术',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '数字矫形肢体骨骼康复机器辅助系统',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '常规早稻新品种“浙早33”的相关培育技术',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '数字矫形肢体骨骼康复机器辅助系统',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '常规早稻新品种“浙早33”的相关培育技术',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  }
-]);
-let total: Ref<number> = ref(12);
-let skip = 0;
-let limit: number = proxy.$limit;
-const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
-// 查询数据
-let searchForm: Ref<any> = ref({});
-let fields: Ref<any[]> = ref([{ label: '公示/公告类型', model: 'type', isSearch: true }]);
-// 请求
-onMounted(async () => {
-  loading.value = true;
-  await searchOther();
-  await search({ skip, limit });
-  loading.value = false;
-});
-const search = async (e: { skip: number; limit: number }) => {
-  // const info = { skip: e.skip, limit: e.limit };
-  //   const res: IQueryResult = await userCheckAxios.query(info);
-  //   if (res.errcode == '0') {
-  //     list.value = res.data;
-  //     total.value = res.total;
-  //   }
-};
-// 查询其他信息
-const searchOther = async () => {
-  //   let res: IQueryResult;
-  //   // 性别
-  //   res = await dictAxios.query({ type: 'common_gender' });
-  //   if (res.errcode == '0') genderList.value = res.data;
-};
-const toSearch = (query) => {
-  searchForm.value = query;
-  search({ skip, limit });
-};
-// 交易大厅查看详情
-const toView = (item) => {
-  router.push({ path: '/trade/detail', query: { id: item.id || item._id } });
-};
-const onShowSizeChange = (current: number, pageSize: number) => {
-  console.log(current, pageSize);
-  limit = pageSize;
-};
-</script>
-<style scoped lang="scss">
-.main {
-  background: url(/src/assets/detail.png) right top no-repeat;
-  background-size: 100%;
-  .one {}
-
-  .two {
-    .list {
-      background: #fff;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-      border-radius: 2px;
-      width: 282px;
-      height: 194px;
-      margin-bottom: 30px;
-      cursor: pointer;
-      transition: all 0.3s;
-      padding: 20px;
-
-      .name {
-        font-size: 16px;
-        color: #121834;
-        height: 16px;
-        line-height: 13px;
-        font-weight: 500;
-        margin: 10px 0;
-      }
-
-      .name:hover {
-        color: #2374ff;
-      }
-
-      .two_1 {
-        font-size: 12px;
-        text-align: justify;
-        line-height: 12px;
-        font-weight: 400;
-        letter-spacing: 0;
-        color: #8f97a3;
-        margin-top: 15px;
-
-        span:last-child {
-          color: #525a68;
-        }
-      }
-
-      .bottom {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-top: 20px;
-
-        .status {
-          padding: 5px 12px;
-          font-size: 12px;
-          color: #2374ff;
-          line-height: 12px;
-          font-weight: 400;
-          background: rgba(35, 116, 255, 0.05);
-          border-radius: 16px;
-        }
-
-        .button {
-          font-size: 12px;
-          color: #fff;
-          text-align: center;
-          line-height: 12px;
-          font-weight: 500;
-          padding: 5px 12px;
-          background: #2374ff;
-          box-shadow: 0 3px 6px 0 rgba(35, 116, 255, 0.1);
-          border-radius: 2px;
-        }
-      }
-    }
-
-    .list:hover {
-      background: #f0f7ff;
-      box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
-    }
-  }
-
-  .thr {
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 0 0 10px 0;
-  }
-}
-</style>

src/views/trade/two.vue

@@ -1,238 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <div class="w_1200">
-          <el-col :span="24" class="one">
-            <cSearch :is_title="false" :is_search="true" :fields="fields" @search="toSearch"> </cSearch>
-          </el-col>
-          <el-col :span="24" class="two">
-            <a-list item-layout="vertical" :loading="loading" :data-source="list">
-              <template #renderItem="{ item }">
-                <a-list-item key="item.name" @click="toView(item)">
-                  <template #extra>
-                    <img width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
-                  </template>
-                  <el-col :span="24" class="name textOver">
-                    <el-tooltip effect="dark" :content="item.name" placement="top">
-                      {{ item.name || '暂无名称' }}
-                    </el-tooltip>
-                  </el-col>
-                  <el-col :span="24" class="two_1"> <span>服务机构: </span>{{ item.unit || '暂无服务机构' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>项目编号: </span>{{ item.no || '暂无项目编号' }} </el-col>
-                  <el-col :span="24" class="two_1"> <span>发布日期: </span>{{ item.notice_time || '暂无发布日期' }} </el-col>
-                </a-list-item>
-              </template>
-            </a-list>
-          </el-col>
-          <el-col :span="24" class="thr">
-            <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total"
-              @showSizeChange="onShowSizeChange" />
-          </el-col>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 基础
-import type { Ref } from 'vue';
-import { onMounted, getCurrentInstance, ref } from 'vue';
-import { useRouter } from 'vue-router';
-// 接口
-// import { ToolsStore } from '@/stores/tool';
-// import type { IQueryResult } from '@/util/types.util';
-// const toolsAxios = ToolsStore();
-const { proxy } = getCurrentInstance() as any;
-
-// 路由
-const router = useRouter();
-// 加载中
-const loading: Ref<any> = ref(false);
-let list: Ref<any> = ref([
-  {
-    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '数字矫形肢体骨骼康复机器辅助系统',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '常规早稻新品种“浙早33”的相关培育技术',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '数字矫形肢体骨骼康复机器辅助系统',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '常规早稻新品种“浙早33”的相关培育技术',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种利用动物软骨制备硫酸软骨素和胶原蛋白多肽的方法成果的转让',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '数字矫形肢体骨骼康复机器辅助系统',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '一种老黄酶NemR-PS突变体及其在制备(S)-香茅醇中的应用等2种成果',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  },
-  {
-    name: '常规早稻新品种“浙早33”的相关培育技术',
-    no: 'XY20231215012',
-    unit: '浙江工业大学',
-    notice_time: '2023-12-15 17:47:19',
-    end_time: '2023-12-25 17:47:19',
-    status: '0'
-  }
-]);
-let total: Ref<number> = ref(12);
-let skip = 0;
-let limit: number = proxy.$limit;
-const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
-// 查询数据
-let searchForm: Ref<any> = ref({});
-let fields: Ref<any[]> = ref([
-  { label: '展示形式', model: 'type', isSearch: true },
-  { label: '公告(报名)开始时间', model: 'label', isSearch: true },
-  { label: '竞价(拍卖)开始时间', model: 'value', isSearch: true },
-  { label: '竞价主体', model: 'sort', isSearch: true },
-  { label: '交易类型', model: 'sort', isSearch: true }
-]);
-// 请求
-onMounted(async () => {
-  loading.value = true;
-  await searchOther();
-  await search({ skip, limit });
-  loading.value = false;
-});
-const search = async (e: { skip: number; limit: number }) => {
-  const info = { skip: e.skip, limit: e.limit };
-  //   const res: IQueryResult = await userCheckAxios.query(info);
-  //   if (res.errcode == '0') {
-  //     list.value = res.data;
-  //     total.value = res.total;
-  //   }
-};
-// 查询其他信息
-const searchOther = async () => {
-  //   let res: IQueryResult;
-  //   // 性别
-  //   res = await dictAxios.query({ type: 'common_gender' });
-  //   if (res.errcode == '0') genderList.value = res.data;
-};
-const toSearch = (query) => {
-  searchForm.value = query;
-  search({ skip, limit });
-};
-// 交易大厅查看详情
-const toView = (item) => {
-  router.push({ path: '/trade/detail', query: { id: item.id || item._id } });
-};
-const onShowSizeChange = (current: number, pageSize: number) => {
-  console.log(current, pageSize);
-  limit = pageSize;
-};
-</script>
-<style scoped lang="scss">
-.main {
-  .one {}
-
-  .two {
-    .name {
-      height: 28px;
-      font-size: 20px;
-      color: #383b40;
-      line-height: 28px;
-      font-weight: 600;
-      margin-bottom: 12px;
-    }
-
-    .name:hover {
-      color: #2374ff;
-    }
-
-    .two_1 {
-      font-size: 14px;
-      text-align: justify;
-      line-height: 14px;
-      font-weight: 400;
-      letter-spacing: 0;
-      color: #8f97a3;
-      margin-top: 20px;
-
-      span:last-child {
-        color: #525a68;
-      }
-    }
-  }
-
-  .thr {
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 0 0 10px 0;
-  }
-}
-</style>