开发ing

package.json

@@ -18,6 +18,7 @@
     "axios": "^0.27.0",
     "core-js": "3.6.5",
     "dom-to-image-more": "^3.7.1",
+    "echarts": "^6.0.0",
     "element-china-area-data": "^6.1.0",
     "element-ui": "2.13.2",
     "hugerte": "^1.0.9",

src/layout/index.vue

@@ -219,13 +219,13 @@ export default {
     opacity: 0;
     .packet-list{
       transition-duration: 300ms;
-      transform: translateY(40px);
+      transform: translateY(60px);
     }
     &.show{
       pointer-events: auto;
       opacity: 1;
       .packet-list{
-        transform: translateY(0);
+        transform: translateY(20px);
       }
     }
   }

src/lib/echart/v5.json

@@ -0,0 +1,382 @@
+{
+    "color": [
+        "#ffffff"
+    ],
+    "backgroundColor": "rgba(0, 0, 0, 0)",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#464646"
+        },
+        "subtextStyle": {
+            "color": "#6E7079"
+        }
+    },
+    "line": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "borderWidth": 1
+        },
+        "lineStyle": {
+            "width": 2
+        },
+        "symbolSize": 4,
+        "symbol": "emptyCircle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "barBorderWidth": 3,
+            "barBorderColor": "#2563eb"
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#eb5454",
+            "color0": "#47b262",
+            "borderColor": "#eb5454",
+            "borderColor0": "#47b262",
+            "borderWidth": 1
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "borderWidth": 3,
+            "borderColor": "#2563eb"
+        },
+        "lineStyle": {
+            "width": 1,
+            "color": "#aaa"
+        },
+        "symbolSize": 4,
+        "symbol": "emptyCircle",
+        "smooth": true,
+        "color": [
+            "#ffffff"
+        ],
+        "label": {
+            "color": "#eee"
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "areaColor": "#eee",
+            "borderColor": "#444",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#000"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,215,0,0.8)",
+                "borderColor": "#444",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(100,0,0)"
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisLabel": {
+            "show": false,
+            "color": "#6E7079"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": [
+                    "#E0E6F1"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.2)",
+                    "rgba(210,219,238,0.2)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisLabel": {
+            "show": false,
+            "color": "#6E7079"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": [
+                    "#E0E6F1"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.2)",
+                    "rgba(210,219,238,0.2)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisLabel": {
+            "show": false,
+            "color": "#6E7079"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": [
+                    "#E0E6F1"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.2)",
+                    "rgba(210,219,238,0.2)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#6E7079"
+            }
+        },
+        "axisLabel": {
+            "show": false,
+            "color": "#6E7079"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": [
+                    "#E0E6F1"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.2)",
+                    "rgba(210,219,238,0.2)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "borderColor": "#999"
+        },
+        "emphasis": {
+            "iconStyle": {
+                "borderColor": "#666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#333"
+        },
+        "left": "center",
+        "right": "auto",
+        "top": 0,
+        "bottom": 10
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#ccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#ccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#DAE1F5",
+            "width": 2
+        },
+        "itemStyle": {
+            "color": "#A4B1D7",
+            "borderWidth": 1
+        },
+        "controlStyle": {
+            "color": "#A4B1D7",
+            "borderColor": "#A4B1D7",
+            "borderWidth": 1
+        },
+        "checkpointStyle": {
+            "color": "#316bf3",
+            "borderColor": "#fff"
+        },
+        "label": {
+            "color": "#A4B1D7"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "color": "#FFF"
+            },
+            "controlStyle": {
+                "color": "#A4B1D7",
+                "borderColor": "#A4B1D7",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "#A4B1D7"
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#bf444c",
+            "#d88273",
+            "#f6efa6"
+        ]
+    },
+    "markPoint": {
+        "label": {
+            "color": "#eee"
+        },
+        "emphasis": {
+            "label": {
+                "color": "#eee"
+            }
+        }
+    },
+    "grid": {
+        "left": 0,
+        "right": 0,
+        "top": 0,
+        "bottom": 0
+    }
+}

src/router/index.js

@@ -17,10 +17,10 @@ export const constantRoutes = [
         meta: {
           title: '首页看板',
           icon: 'el-icon-house',
-          roles: 'dashboard',//roles为权限控制标识
+          roles: 'dashboard', // roles为权限控制标识
           func: [
             {
-              name: '头部概览',//这里是更为细化的控制
+              name: '头部概览', // 这里是更为细化的控制
               roles: 'dashboard.head'
             }
           ]
@@ -63,7 +63,7 @@ export const constantRoutes = [
         component: () => import('@/views/preRegManage/index'),
         name: 'preRegManage',
         meta: {
-          title: '预登记表单',
+          title: '表单管理',
           icon: 'el-icon-tickets',
           roles: 'preReg'
         },
@@ -279,81 +279,92 @@ export const constantRoutes = [
         component: () => import('@/views/invitationManage/index'),
         name: 'invitationManage',
         meta: {
-          title: '邀请函模板管理',
+          title: '邀请函管理',
           icon: 'el-icon-files',
           roles: 'invitation'
         },
         redirect: '/invitation/list',
-        children: [{
-          path: 'list',
-          component: () => import('@/views/invitationManage/list'),
-          name: 'invitationManageList',
-          meta: {
-            title: '邀请函模板管理',
-            icon: 'el-icon-edit',
-            roles: 'invitation.index',
-            collapse: false,
-            func: [
-              {
-                roles: 'invitation.addList',
-                name: '添加邀请函模板'
-              },
-              {
-                roles: 'invitation.goto',
-                name: '点击进入模板'
-              },
-              {
-                roles: 'invitation.changePage',
-                name: '邀请函模板翻页'
-              }
-            ]
-          }
-        },
-        {
-          path: 'add',
-          component: () => import('@/views/invitationManage/edit'),
-          name: 'invitationAdd',
-          meta: {
-            title: '邀请函模板新增',
-            icon: 'el-icon-document-add',
-            roles: 'invitation.add',
-            collapse: true
-          }
-        },
-        {
-          path: 'edit/:id',
-          component: () => import('@/views/invitationManage/edit'),
-          name: 'invitationEdit',
-          meta: {
-            title: '邀请函模板编辑',
-            icon: 'el-icon-edit',
-            hidden: true,
-            roles: 'invitation.edit',
-            collapse: true,
-            func: [
-              {
-                roles: 'invitation.save',
-                name: '修改邀请函模板'
-              },
-              {
-                roles: 'invitation.desc',
-                name: '修改邀请函描述'
-              },
-              {
-                roles: 'invitation.rename',
-                name: '重命名邀请函模板'
-              },
-              {
-                roles: 'invitation.select',
-                name: '选择展会'
-              },
-              {
-                roles: 'invitation.editor',
-                name: '允许操作编辑器'
-              }
-            ]
+        children: [
+          {
+            path: 'send',
+            component: () => import('@/views/audienceManage/index'),
+            name: 'invitationSend',
+            meta: {
+              title: '发送邀请函',
+              icon: 'el-icon-message',
+              roles: 'audience'
+            }
+          },
+          {
+            path: 'list',
+            component: () => import('@/views/invitationManage/list'),
+            name: 'invitationManageList',
+            meta: {
+              title: '邀请函模板管理',
+              icon: 'el-icon-edit',
+              roles: 'invitation.index',
+              collapse: false,
+              func: [
+                {
+                  roles: 'invitation.addList',
+                  name: '添加邀请函模板'
+                },
+                {
+                  roles: 'invitation.goto',
+                  name: '点击进入模板'
+                },
+                {
+                  roles: 'invitation.changePage',
+                  name: '邀请函模板翻页'
+                }
+              ]
+            }
+          },
+          {
+            path: 'add',
+            component: () => import('@/views/invitationManage/edit'),
+            name: 'invitationAdd',
+            meta: {
+              title: '邀请函模板新增',
+              icon: 'el-icon-document-add',
+              roles: 'invitation.add',
+              collapse: true
+            }
+          },
+          {
+            path: 'edit/:id',
+            component: () => import('@/views/invitationManage/edit'),
+            name: 'invitationEdit',
+            meta: {
+              title: '邀请函模板编辑',
+              icon: 'el-icon-edit',
+              hidden: true,
+              roles: 'invitation.edit',
+              collapse: true,
+              func: [
+                {
+                  roles: 'invitation.save',
+                  name: '修改邀请函模板'
+                },
+                {
+                  roles: 'invitation.desc',
+                  name: '修改邀请函描述'
+                },
+                {
+                  roles: 'invitation.rename',
+                  name: '重命名邀请函模板'
+                },
+                {
+                  roles: 'invitation.select',
+                  name: '选择展会'
+                },
+                {
+                  roles: 'invitation.editor',
+                  name: '允许操作编辑器'
+                }
+              ]
+            }
           }
-        }
         ]
       },
       {

src/styles/variables.scss

@@ -9,7 +9,7 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 // sidebar
 $menuText:#4B5563;
-$menuActiveText: #2563EB;
+$menuActiveText: #3367da;
 $subMenuActiveText: #212121; // https://github.com/ElemeFE/element/issues/12951
 $menuBg: #ffffff;
 $menuActiveBg: #004dff11;

src/views/components/packetList.vue

@@ -170,8 +170,7 @@ export default Vue.extend({
         <div :class="['cycle-item',cycle==='year'?'active':'']" @click="changeCycle('year')">按年支付</div>
       </div>
       <template>
-        <div class="hr" />
-        <div class="cycle-tab">
+        <div class="head-tab">
           <div :class="['cycle-item',type==='expoReg'?'active':'']" @click="changeType('expoReg')">
             <div>展会预登记</div>
             <div v-if="packetData.expo" class="badge">已订购</div>
@@ -455,24 +454,24 @@ export default Vue.extend({
     position: relative;
     padding: 16px;
     width: 90%;
-    height: 90%;
+    height: 80%;
     background-color: white;
     border-radius: 8px;
     grid-gap: 16px;
     display: grid;
     grid-template-rows: auto 1fr auto;
     .tab-list{
-      margin-top: 36px;
-      gap: 8px;
+      margin-top: -57px;
+      gap: 24px;
       display: flex;
       flex-direction: column-reverse;
       align-items: center;
       justify-content: center;
-      .hr{
-        width: 240px;
-        height: 2px;
-        background-color: lightgray;
-      }
+      //.hr{
+      //  width: 640px;
+      //  height: 2px;
+      //  background-color: lightgray;
+      //}
     }
     .button-cont{
       display: flex;
@@ -623,6 +622,39 @@ export default Vue.extend({
       }
 
     }
+    .head-tab{
+      display: flex;
+      //width: 100%;
+      //justify-content: flex-end;
+      .cycle-item{
+        gap: 6px;
+        background-color: #e8e8e8;
+        color: #2563EB;
+        cursor: pointer;
+        transition-duration: 300ms;
+        border-radius: 16px 16px 0 0 ;
+        padding: 12px 26px 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .badge{
+          border: 1px solid #C4A793;
+          font-size: 12px;
+          background-image: linear-gradient(60deg,#EAD5C3,#C7A088);
+          padding: 1px 6px;
+          font-weight: normal;
+          color: #543317;
+          border-radius: 12px;
+        }
+        &:hover{
+
+        }
+        &.active{
+          font-weight: bold;
+          background-color: white;
+        }
+      }
+    }
     .cycle-tab{
       gap: 16px;
       display: flex;

src/views/dashboard/index.vue

@@ -2,32 +2,67 @@
   <div class="main-box">
     <div class="scroll-box">
       <div class="grid-box">
-        <div v-permission="'dashboard.head'" class="main-card">
-          <div class="hello-text">{{ getTimeWord() }}，{{ user.nickname }}！</div>
-          <div class="card-content">
-            <div class="expo-text">
+        <div v-permission="'dashboard.head'" class="main-card card">
+          <div class="left-box">
+            <div class="title">{{ getTimeWord() }}，{{ user.nickname }}！</div>
+            <div class="desc">
               <span v-if="currentExpo">距离{{ currentExpo.expo_name }}结束还有{{ getEndDay(currentExpo.end_date) }}天</span>
               <span v-else>没有进行中的展会</span>
             </div>
-            <div class="quick-nav">
-              <router-link class="nav-item" to="audience">
-                <span class="icon el-icon-user" />
-                <span class="text">观众管理</span>
+            <div class="button-list">
+              <router-link to="/audience" class="card-button">
+                <div class="el-icon-user button-icon"></div>
+                <div class="info-box">
+                  <div class="text">已预约观众</div>
+                  <div class="value">68</div>
+                </div>
               </router-link>
-              <router-link class="nav-item" to="preRegister">
-                <span class="icon el-icon-tickets" />
-                <span class="text">表单管理</span>
+              <router-link to="/invitation" class="card-button">
+                <div class="el-icon-key button-icon"></div>
+                <div class="info-box">
+                  <div class="text">待审邀请函</div>
+                  <div class="value">4</div>
+                </div>
               </router-link>
-              <router-link class="nav-item" to="exhibitor">
-                <span class="icon el-icon-office-building" />
-                <span class="text">展商管理</span>
-              </router-link>
-              <router-link class="nav-item" to="invitation">
-                <span class="icon el-icon-files" />
-                <span class="text">模板管理</span>
+              <router-link to="/exhibitor" class="card-button">
+                <div class="el-icon-date button-icon"></div>
+                <div class="info-box">
+                  <div class="text">进行中展会</div>
+                  <div class="value">2</div>
+                </div>
               </router-link>
             </div>
           </div>
+          <div class="form">
+            <div class="form-inner" id="form">
+            </div>
+          </div>
+        </div>
+        <div class="card-box card">
+          <router-link to="/preRegister" class="card-item">
+            <div class="el-icon-tickets card-icon"></div>
+            <div class="card-info">
+              <div class="title">预登记表单</div>
+              <div class="describe">准备展会报名表</div>
+            </div>
+            <div class="goto-icon el-icon-top-right"></div>
+          </router-link>
+          <router-link to="/invitation" class="card-item">
+            <div class="el-icon-files card-icon"></div>
+            <div class="card-info">
+              <div class="title">邀请函模板</div>
+              <div class="describe">准备邀请函以便发送</div>
+            </div>
+            <div class="goto-icon el-icon-top-right"></div>
+          </router-link>
+          <router-link to="share&utm" class="card-item">
+            <div class="el-icon-data-line card-icon"></div>
+            <div class="card-info">
+              <div class="title">分享中心</div>
+              <div class="describe">制作海报、分享展会</div>
+            </div>
+            <div class="goto-icon el-icon-top-right"></div>
+          </router-link>
         </div>
         <div class="starter-box card">
           <div class="icon el-icon-position"></div>
@@ -45,6 +80,8 @@
 </template>
 
 <script>
+import echartsTheme from '@/lib/echart/v5.json'
+import * as echarts from 'echarts'
 import { getExpoList } from '@/api/expo'
 export default {
   name: 'Dashboard',
@@ -58,8 +95,42 @@ export default {
   },
   mounted() {
     this.init()
+    this.initForm()
   },
   methods: {
+    initForm() {
+      echarts.registerTheme('blueTheme', echartsTheme)
+      const dom = document.getElementById('form')
+      const form = echarts.init(dom,'blueTheme',{
+        renderer: 'canvas',
+        width: dom.offsetWidth,
+        height: dom.offsetHeight
+      })
+      form.setOption({
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params) => {
+            return params[0].name + '<br/>新增' + params[0].data + '观众'
+          }
+        },
+        series: [
+          {
+            data: [200, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true,
+            areaStyle: {}
+          }
+        ]
+      })
+    },
     init() {
       getExpoList(1, 20).then(res => {
         const expoList = res.data.data
@@ -113,8 +184,8 @@ export default {
     .grid-box{
       display: grid;
       grid-gap: 16px;
-      grid-template-rows: 200px 200px 200px;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+      grid-template-rows: 280px 200px 200px;
+      grid-template-columns: repeat(12, 1fr);
       .card{
         cursor: pointer;
         transition-duration: 300ms;
@@ -127,11 +198,21 @@ export default {
           font-weight: bold;
           margin-bottom: 16px;
           position: relative;
+          .num{
+            margin-right: 4px;
+            font-size: 42px;
+          }
+          &:has(.num){
+            margin-top: -18px;
+          }
         }
         .desc{
           width: 80%;
           position: relative;
         }
+        .card-content{
+          margin-top: 16px;
+        }
         .icon{
           opacity: 0.1;
           font-size: 150px;
@@ -146,8 +227,51 @@ export default {
           }
         }
       }
-      .starter-box{
+      .card-box{
+        padding: 0;
         grid-column: span 2;
+        display: grid;
+        grid-gap: 16px;
+        grid-template-rows: repeat(3, 1fr);
+        .card-item{
+          position: relative;
+          padding: 0 18px;
+          border-radius: 8px;
+          background-image: linear-gradient(150deg,#759BE8, #8dace6);
+          display: flex;
+          align-items: center;
+          color: white;
+          gap: 16px;
+          transition-duration: 300ms;
+          text-decoration: none;
+          &:hover{
+            box-shadow: inset 0 0 0 50px #ffffff18;
+          }
+          .goto-icon{
+            font-size: 16px;
+            //font-weight: bold;
+            position: absolute;
+            right: 10px;
+            top: 10px;
+          }
+          .card-icon{
+            //font-weight: bold;
+            font-size: 25px;
+          }
+          .card-info{
+            flex: 1;
+            .title{
+              font-size: 17px;
+              margin-bottom: 2px;
+            }
+            .describe{
+              font-size: 12.4px;
+            }
+          }
+        }
+      }
+      .starter-box{
+        grid-column: span 4;
         background: #e1f8f8;
         color: #117878;
         &:hover{
@@ -155,7 +279,7 @@ export default {
         }
       }
       .invitation-box{
-        grid-column: span 2;
+        grid-column: span 4;
         background: #fbf3e7;
         color: #88601f;
         &:hover{
@@ -163,42 +287,73 @@ export default {
         }
       }
       .main-card{
-        grid-column: span 6;
-        background: $menuActiveBg;
-        padding: 36px 36px 18px;
-        border-radius: 8px;
-        .hello-text{
-          color: $menuActiveText;
-          font-size: 28px;
-          font-weight: bold;
-        }
-        .card-content{
-          margin-top: 16px;
-          display: grid;
-          grid-template-columns: 1fr 2fr;
-          .expo-text{
-
+        grid-column: span 10;
+        background: #759be8;
+        color: white;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        overflow: hidden;
+        .form{
+          position: relative;
+          .form-inner{
+            position: absolute;
+            bottom: -18px;
+            right: -36px;
+            width: calc(110% + 64px);
+            height: 100%;
+            &::after{
+              pointer-events: none;
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 30%;
+              height: 100%;
+              background-image: linear-gradient(90deg, #759BE8ff, #759BE800);
+            }
           }
-          .quick-nav{
+        }
+        .left-box{
+          position: relative;
+          z-index: 2;
+          .button-list{
+            margin-top: 60px;
+            height: 70px;
             display: flex;
-            justify-content: flex-end;
-            .nav-item{
-              transition-duration: 300ms;
-              padding: 16px 32px;
-              border-radius: 16px;
-              text-decoration: unset;
-              color: $menuActiveText;
+            .card-button{
+              width: 180px;
+              padding: 8px 14px 8px 8px;
               display: flex;
-              flex-direction: column;
-              .icon{
-                margin-bottom: 4px;
-                font-size: 32px;
+              gap: 12px;
+              cursor: pointer;
+              border-radius: 16px;
+              transition-duration: 300ms;
+              color: white;
+              text-decoration: none;
+              &:hover{
+                background-color: #ffffff20;
               }
-              .text{
-                font-size: 16px;
+              .info-box{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                .text{
+                  font-size: 14px;
+                }
+                .value{
+                  font-size: 20px;
+                  font-weight: bold;
+                }
               }
-              &:hover{
-                background: #004DFF11;
+              .button-icon{
+                font-size: 28px;
+                border-radius: 14px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #ffffff44;
+                height: 54px;
+                width: 54px;
               }
             }
           }

src/views/exhibitorManage/exhibitorSetting.vue

@@ -21,8 +21,6 @@ export default Vue.extend({
         images: ['/common/2025/0915/68c7b263bc4b1.webp'],
         social_links: {
           facebook: '',
-          twitter: '',
-          linkedin: ''
         },
         form_template_id: '',
         urla: '',
@@ -216,21 +214,16 @@ export default Vue.extend({
         <div class="form-item">
           <div class="label">社交账号</div>
           <div class="social-list">
-            <div class="social-item">
-              <el-input v-model="exhibitorSetting.social_links.facebook" placeholder="请输入facebook主页地址">
-                <template slot="append">facebook</template>
-              </el-input>
-            </div>
-            <div class="social-item">
-              <el-input v-model="exhibitorSetting.social_links.twitter" placeholder="请输入twitter主页地址">
-                <template slot="append">twitter</template>
-              </el-input>
-            </div>
-            <div class="social-item">
-              <el-input v-model="exhibitorSetting.social_links.linkedin" placeholder="请输入linkedin主页地址">
-                <template slot="append">linkedin</template>
+            <div v-for="(value,key) in exhibitorSetting.social_links" class="social-item">
+              <el-input :value="value" :placeholder="'请输入'+key+'主页地址'">
+                <el-select :value="key" slot="append">
+                  <el-option :disabled="exhibitorSetting.social_links.facebook!==undefined" value="facebook" label="facebook"></el-option>
+                  <el-option :disabled="exhibitorSetting.social_links.twitter!==undefined" value="twitter" label="twitter"></el-option>
+                  <el-option :disabled="exhibitorSetting.social_links.linkedin!==undefined" value="linkedin" label="linkedin"></el-option>
+                </el-select>
               </el-input>
             </div>
+            <el-button type="primary" class="add-social el-icon-plus">添加</el-button>
           </div>
         </div>
         <div class="form-item required">
@@ -336,27 +329,15 @@ export default Vue.extend({
           display: flex;
           flex-direction: column;
           grid-gap: 8px;
-          .drag-cont{
-            display:block;
-            min-height: 60px;
-            .social-item{
-              position: relative;
-              margin-bottom: 6px;
-              .handel{
-                color: gray;
-                height: 100%;
-                width: 20px;
-                position: absolute;
-                top: 0;
-                left: 0;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                cursor: move;
-              }
-              .el-select{
-                width: 160px;
-              }
+          .add-social{
+            margin-left: auto;
+            width: fit-content;
+          }
+          .social-item{
+            position: relative;
+            margin-bottom: 6px;
+            .el-select{
+              width: 120px;
             }
           }
         }

src/views/preRegManage/edit.vue

@@ -542,7 +542,7 @@ export default Vue.extend({
         })
       }
       getMyFields().then(res => {
-        this.customComp = res.data
+        this.systemComp = res.data.concat(this.systemComp)
       }).catch((err) => {
         this.$notify({
           title: '提示',
@@ -768,14 +768,13 @@ export default Vue.extend({
   <div v-loading="loading" class="main-box">
     <div class="comp-lib">
       <div class="title">
-        <div :class="['tab-item', CompType==='sys'?'active':'']" @click="CompType='sys'">系统组件</div>
-        <div :class="['tab-item', CompType==='my'?'active':'']" @click="CompType='my'">我的组件</div>
-        <div :class="['tab-item', CompType==='quick'?'active':'']" @click="CompType='quick'">快速组件</div>
+        <div :class="['tab-item', CompType==='sys'?'active':'']" @click="CompType='sys'">定制组件</div>
+        <div :class="['tab-item', CompType==='my'?'active':'']" @click="CompType='my'">基本组件</div>
       </div>
       <div v-permission="'preReg.editEdit'" class="list">
-        <draggable v-model="CompType==='sys'?systemComp:CompType==='my'?customComp:quickComp" :options="{sort:false}" :group="{name:'form',put:false,pull:'clone'}" :clone="cloneItem" class="drag-list">
+        <draggable v-model="CompType==='sys'?systemComp:quickComp" :options="{sort:false}" :group="{name:'form',put:false,pull:'clone'}" :clone="cloneItem" class="drag-list">
           <transition-group class="drag-cont">
-            <div v-for="(element) in CompType==='sys'?systemComp:CompType==='my'?customComp:quickComp" :key="element.id" :style="{gridColumn:'span '+element.field_data.width}">
+            <div v-for="(element) in CompType==='sys'?systemComp:quickComp" :key="element.id" :style="{gridColumn:'span '+element.field_data.width}">
               <div v-if="element.field_type==='tips'" :class="[element.field_type,'form-item']">
                 <div class="tips">{{ element.field_label }}</div>
               </div>
@@ -977,7 +976,7 @@ export default Vue.extend({
                 <el-button v-permission="'preReg.copy'" type="primary" size="mini" @click="cloneForm()">复制</el-button>
               </div>
             </div>
-            <el-button slot="reference" type="primary" icon="el-icon-document-copy" circle />
+            <el-button slot="reference" type="primary">复制</el-button>
           </el-popover>
           <el-button v-permission="'preReg.save'" type="primary" @click="save">保存表单<span class="mini-text"> (Ctrl+S)</span></el-button>
         </div>
@@ -1125,7 +1124,7 @@ export default Vue.extend({
                 <el-button v-permission="'preReg.saveCompEdit'" type="primary" size="mini" @click="cloneToMe(currentData)">复制</el-button>
               </div>
             </div>
-            <el-button slot="reference" type="primary" icon="el-icon-folder-add" circle />
+            <el-button slot="reference" type="primary">收藏</el-button>
           </el-popover>
           <el-button type="danger" @click="removeComp(currentData)">删除组件<span class="mini-text"> (Delete)</span></el-button>
         </div>

src/views/shareUtm/share.vue

@@ -12,6 +12,7 @@ export default Vue.extend({
       rootPath: window.location.origin,
       shareType: 'link',
       currentExpo: {},
+      renderData: {},
       shareData: {
         qrLogo: '',
         qrLogoSize: 2,
@@ -37,10 +38,18 @@ export default Vue.extend({
         })
       })
     },
+    initRenderData() {
+      this.renderData = {
+        title: this.currentExpo.expo_name,
+        sub_title: '请编辑副标题',
+        phone: this.currentExpo.contact_phone || '请编辑电话',
+        address: this.currentExpo.location || '请编辑地址',
+      }
+    },
     getExpo() {
       getMyExpoInfo(this.expoId).then(res => {
         this.currentExpo = res.data
-        console.log(this.currentExpo)
+        this.initRenderData()
       }).catch(err => {
         this.$notify({
           title: '提示',
@@ -123,12 +132,18 @@ export default Vue.extend({
       </div>
       <div v-if="shareType==='post_image' && expoId" class="post-share">
         <div class="post-inner">
-
+          <div class="post-temp blue-temp-1">
+            <div class="title">{{renderData.sub_title}}</div>
+            <div class="sub-title">{{renderData.title}}</div>
+            <div class="phone"></div>
+            <div class="address"></div>
+          </div>
+          <div class="border-box"></div>
         </div>
       </div>
     </div>
     <div class="share-config">
-      <template v-if="shareType==='qrcode'">
+      <template v-if="['qrcode','post_image'].includes(shareType)">
         <div class="sub-title">二维码logo</div>
         <div class="logo-input">
           <img v-if="shareData.qrLogo" class="logo" :src="shareData.qrLogo">
@@ -272,6 +287,64 @@ export default Vue.extend({
         background-position: center;
         position: relative;
         background-image: url("/static/image/prototype/wallpost/prototypewall.jpg");
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .post-inner{
+          padding: 8px 8px 13px 15px;
+          position: relative;
+          background-color: white;
+          .border-box{
+            border: 20px solid;
+            border-image: url("/static/image/prototype/wallpost/prototypepost.png") 20 stretch;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+          }
+          .post-temp{
+            width: 280px;
+          }
+          .blue-temp-1{
+            overflow: hidden;
+            display: block;
+            padding: 8px;
+            position: relative;
+            background: #EAFBFF;
+            &::before{
+              content: '';
+              position: absolute;
+              top: 0;
+              right: 0;
+              //width: 100px;
+              //height: 20px;
+              border-top: 14px solid #45A8FF;
+              border-right: 100px solid #45A8FF;
+              border-bottom: 14px solid transparent;
+              border-left: 100px solid transparent;
+
+            }
+            .title{
+              color: #45A8FF;
+              font-weight: 1000;
+              text-align: center;
+              letter-spacing: 1.1px;
+              font-size: 24px;
+              line-height: 1.1;
+              margin: 24px auto 0;
+              width: 110px;
+            }
+            .sub-title{
+              position: relative;
+              width: fit-content;
+              padding: 2px 12px;
+              margin: 6px auto 0;
+              background: #45A8FF;
+              color: white;
+            }
+          }
+        }
       }
       .link-share{
         .link-inner{

src/views/user/form.vue

@@ -461,6 +461,11 @@ export default Vue.extend({
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       grid-gap: 8px;
+      @media (max-width:768px)  {
+        display: flex;
+        grid-gap: 16px;
+        flex-direction: column-reverse;
+      }
       &.ok{
         display: flex;
         flex-direction: column;