From 3f9bd3aac03d45b3757d167c03cb3958abb957d7 Mon Sep 17 00:00:00 2001
From: jianjun <jianjun4833@163.com>
Date: Sun, 26 Sep 2021 18:02:03 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E6=89=93=E5=8C=85=E5=91=BD=E4=BB=A4=E5=8F=8A?=
 =?UTF-8?q?=E8=84=9A=E6=9C=AC=EF=BC=9B=E4=BF=AE=E6=94=B9=E6=89=93=E5=8C=85?=
 =?UTF-8?q?=E5=91=BD=E4=BB=A4=20dev=EF=BC=8Ctest=EF=BC=8Cprod?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development |  4 ++--
 .env.production  |  3 ++-
 .env.test        | 13 +++++++++++++
 package.json     | 10 ++++------
 4 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 .env.test

diff --git a/.env.development b/.env.development
index 9113d2c..fe2591b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 页面标题
-VUE_APP_TITLE = 问卷调查测试环境
+VUE_APP_TITLE = 问卷调查开发环境
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VUE_APP_API_ROOT_TDUCK = /tduck-api
-#VUE_APP_API_ROOT = http://localhost:8080/api
+#VUE_APP_API_ROOT = http://localhost:8116/
 VUE_APP_API_ROOT = http://192.168.1.140/api
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VUE_APP_DEBUG_TOOL =
diff --git a/.env.production b/.env.production
index 5db4a72..788b2bd 100644
--- a/.env.production
+++ b/.env.production
@@ -8,5 +8,6 @@ VUE_APP_DEBUG_TOOL =
 VUE_APP_MAP_KEY = f2200337d0d08538e78729572749882d
 # 微信功能开关 开启设置 ON，关闭设置 OFF
 VUE_APP_WX = ON
-#项目根路径
+#项目根路径˚
 VUE_APP_PUBLIC_PATH=questionnaire
+˚
diff --git a/.env.test b/.env.test
new file mode 100644
index 0000000..85a0c96
--- /dev/null
+++ b/.env.test
@@ -0,0 +1,13 @@
+# 页面标题
+VUE_APP_TITLE = 问卷调查测试环境
+# 接口请求地址，会设置到 axios 的 baseURL 参数上
+VUE_APP_API_ROOT_TDUCK = /tduck-api
+VUE_APP_API_ROOT = https://epmet-dev.elinkservice.cn/api
+# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
+VUE_APP_DEBUG_TOOL =
+# 高德地图key 暂时没有用到
+VUE_APP_MAP_KEY = f2200337d0d08538e78729572749882d
+# 微信功能开关 开启设置 ON，关闭设置 OFF
+VUE_APP_WX = OFF
+#项目根路径
+VUE_APP_PUBLIC_PATH=questionnaire
diff --git a/package.json b/package.json
index f95f1fa..772d5f3 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,10 @@
   "scripts": {
     "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
-    "build-dev": "vue-cli-service build --mode development --dest questionnaire",
+    "build:dev": "vue-cli-service build --mode development --dest questionnaire",
+    "build:test": "vue-cli-service build --mode test --dest questionnaire",
     "preview": "node build/index.js --preview",
-    "build": "vue-cli-service build",
+    "build:prod": "vue-cli-service build --mode production --dest questionnaire",
     "lint": "vue-cli-service lint",
     "svgo": "svgo -f src/assets/icons"
   },
@@ -64,9 +65,7 @@
     "last 2 versions",
     "not ie <= 8"
   ],
-  "lint-staged": {
-
-  },
+  "lint-staged": {},
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -85,5 +84,4 @@
       "parser": "babel-eslint"
     }
   }
-
 }

From b62800f7a4b2483a8e23ba186337375647f184e1 Mon Sep 17 00:00:00 2001
From: jianjun <jianjun4833@163.com>
Date: Sun, 26 Sep 2021 18:02:35 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=A4=9A=E4=BA=86=E4=B8=AA=E5=8F=A5?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.env.production b/.env.production
index 788b2bd..daa642e 100644
--- a/.env.production
+++ b/.env.production
@@ -10,4 +10,3 @@ VUE_APP_MAP_KEY = f2200337d0d08538e78729572749882d
 VUE_APP_WX = ON
 #项目根路径˚
 VUE_APP_PUBLIC_PATH=questionnaire
-˚

From 6968a2fbf8a96c5b8d714e2678c25cb66c7955d5 Mon Sep 17 00:00:00 2001
From: jianjun <jianjun4833@163.com>
Date: Mon, 27 Sep 2021 14:26:11 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                 |   6 +-
 src/router/modules/root.js        |  12 +-
 src/views/official/DataPay.vue    | 213 --------
 src/views/official/PayService.vue |  85 ---
 src/views/official/header.vue     |  99 ----
 src/views/official/index.vue      | 871 ------------------------------
 src/views/official/indexbak.vue   | 508 -----------------
 7 files changed, 4 insertions(+), 1790 deletions(-)
 delete mode 100644 src/views/official/DataPay.vue
 delete mode 100644 src/views/official/PayService.vue
 delete mode 100644 src/views/official/header.vue
 delete mode 100644 src/views/official/index.vue
 delete mode 100644 src/views/official/indexbak.vue

diff --git a/public/index.html b/public/index.html
index feca0bd..7a911d0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,13 +17,13 @@
     <% } %>
     <!--百度访问统计-->
     <script>
-        /*var _hmt = _hmt || [];
+        var _hmt = _hmt || [];
         (function() {
             var hm = document.createElement("script");
-            hm.src = "https://hm.baidu.com/hm.js?4dbdbc5421c41984499f878628d60f2f";
+            hm.src = "https://hm.baidu.com/hm.js?92880704172e026b549f0e2a9c251f8a";
             var s = document.getElementsByTagName("script")[0];
             s.parentNode.insertBefore(hm, s);
-        })();*/
+        })();
     </script>
 </head>
   <body>
diff --git a/src/router/modules/root.js b/src/router/modules/root.js
index 741c6ef..ee03224 100644
--- a/src/router/modules/root.js
+++ b/src/router/modules/root.js
@@ -22,17 +22,7 @@ export default [
     {
         path: '/',
         meta: {requireLogin: false},
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/official/index.vue')
-    },
-    {
-        path: '/tduck-front',
-        meta: {requireLogin: false},
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/official/index.vue')
-    },
-    {
-        path: '/payService',
-        meta: {requireLogin: false},
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/official/PayService')
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/home')
     },
     {
         path: '/login',
diff --git a/src/views/official/DataPay.vue b/src/views/official/DataPay.vue
deleted file mode 100644
index 1518ee3..0000000
--- a/src/views/official/DataPay.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-    <div class="data-pay">
-        <el-row :span="24">
-            <el-col v-for="(item,index) in data"
-                    :key="index"
-                    :md="span"
-                    :offset="index==0?4:0"
-                    :sm="12"
-                    :xs="24"
-            >
-                <div class="item">
-                    <div :style="{backgroundColor:item.color}"
-                         class="top"
-                    />
-                    <div class="header">
-                        <p class="title">{{ item.title }}</p>
-                        <img :src="item.src"
-                             alt=""
-                             class="img"
-                        >
-                        <template v-if="item.subtitle">
-                            <p :style="{color:item.color}"
-                               class="subtitle"
-                            >
-                                {{ item.subtitle }}
-                            </p>
-                        </template>
-                        <template v-if="item.money || item.dismoney">
-                            <p :style="{color:item.color}"
-                               class="money"
-                            >
-                                <span>¥</span>
-                                <count-to :end-val="item.money" />
-                                <s>{{ item.dismoney }}</s>
-                                <em>{{ item.tip }}</em>
-                            </p>
-                        </template>
-                        <div class="line" />
-                        <a :href="item.href?item.href:'javascript:void(0);'"
-                           :style="{backgroundColor:item.color}"
-                           class="btn"
-                           @click="item.click?item.click(item):''"
-                        >{{ item.subtext }}</a>
-                    </div>
-                    <div class="list">
-                        <div v-for="(citem,cindex) in item.list"
-                             :key="cindex"
-                             class="list-item"
-                        >
-                            <i v-if="citem.check"
-                               :style="{color:item.color}"
-                               class="list-item-icon list-item--check"
-                            >√</i>
-                            <i v-else
-                               class="list-item-icon list-item--no"
-                            >x</i>
-                            <a :href="citem.href?citem.href:'javascript:void(0);'">
-                                <el-tooltip :disabled="!citem.tip"
-                                            effect="dark"
-                                            placement="top"
-                                >
-                                    <div slot="content"
-                                         v-html="citem.tip"
-                                    />
-                                    <span :class="{'list-item--link':citem.href}">{{ citem.title }}</span>
-                                </el-tooltip>
-
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </el-col>
-        </el-row>
-    </div>
-</template>
-
-<script>
-import CountTo from '@/components/CountTo'
-
-export default {
-    name: 'DataPay',
-    components: {CountTo},
-    props: {
-        option: {
-            type: Object,
-            default: () => {
-            }
-        }
-    },
-    computed: {
-        animation() {
-            return this.option.animation
-        },
-        decimals() {
-            return this.option.decimals || 0
-        },
-        span() {
-            return this.option.span || 6
-        },
-        data() {
-            return this.option.data || []
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.data-pay .item {
-  margin: 0 auto;
-  padding-bottom: 16px;
-  width: 80%;
-  position: relative;
-  border-radius: 4px;
-  background-color: #fff;
-  min-height: 670px;
-  -webkit-box-shadow: 1px 2px 10px #eee;
-  box-shadow: 1px 2px 10px #eee;
-}
-
-.data-pay .top {
-  width: 100%;
-  height: 6px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: 4px 4px 0 0;
-}
-
-.data-pay .header {
-  margin-bottom: 40px;
-  text-align: center;
-}
-
-.data-pay .title {
-  text-align: center;
-  padding: 20px 0 10px;
-  font-size: 20px;
-  font-weight: 200;
-}
-
-.data-pay .money span {
-  margin-right: 5px;
-  font-size: 14px;
-}
-
-.data-pay .money .b {
-  margin-right: 2px;
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.data-pay .money s {
-  margin-right: 3px;
-  font-size: 12px;
-}
-
-.data-pay .money em {
-  font-size: 14px;
-  font-style: normal;
-}
-
-.data-pay .img {
-  width: 50px;
-}
-
-.data-pay .line {
-  width: 60%;
-  height: 1px;
-  background: rgba(150, 150, 150, 0.1);
-  margin: 20px auto;
-}
-
-.data-pay .btn {
-  display: block;
-  width: 120px;
-  height: 32px;
-  line-height: 32px;
-  margin: 0 auto;
-  text-align: center;
-  border-radius: 32px;
-  color: #fff;
-  cursor: pointer;
-  -webkit-transition: opacity 0.2s ease-in-out;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.data-pay .list-item {
-  list-style: none;
-  padding-left: 20px;
-  margin-bottom: 12px;
-  color: #666;
-  font-size: 14px;
-}
-
-.data-pay .list-item a {
-  color: #666;
-}
-
-.data-pay .list-item-icon {
-  color: #515a6e;
-  margin-right: 8px;
-}
-
-.data-pay .list-item--link {
-  font-size: 12px;
-  color: #2d8cf0;
-}
-
-.data-pay .list-item--no,
-.data-pay .list-item--no + span {
-  color: #c5c8ce;
-}
-</style>
diff --git a/src/views/official/PayService.vue b/src/views/official/PayService.vue
deleted file mode 100644
index 363d15f..0000000
--- a/src/views/official/PayService.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <div>
-        <Header />
-        <data-pay :option="option" />
-    </div>
-</template>
-
-<script>
-import DataPay from '@/views/official/DataPay'
-import Header from '@/views/official/header'
-import {MessageBox} from 'element-ui'
-
-export default {
-    name: 'PayService',
-    components: {Header, DataPay},
-    data() {
-        return {
-            option: {
-                span: 8,
-                data: [
-                    {
-                        title: '私有部署',
-                        src: 'https://qiniu.smileyi.top/vip1.png',
-                        money: 599,
-                        dismoney: 999,
-                        tip: '/次',
-                        color: '#2054F0FF',
-                        subtext: '购买',
-                        click: function() {
-                            MessageBox.alert('<img src="https://qiniu.smileyi.top/pay_qrcode1.jpg"/>', '添加客服微信', {
-                                dangerouslyUseHTMLString: true
-                            })
-                        },
-                        list: [
-                            {
-                                title: '官方部署，快速使用',
-                                check: true
-                            },
-                            {
-                                title: '一次部署，开心使用',
-                                check: true
-                            },
-                            {
-                                title: '愉快解决，不再头疼',
-                                check: true
-                            },
-                            {
-                                title: '服务稳定，持久耐用',
-                                check: true
-                            }
-                        ]
-                    }, {
-                        title: '私有定制',
-                        src: 'https://qiniu.smileyi.top/vip2.png',
-                        color: '#33C9FDFF',
-                        money: 888,
-                        dismoney: 1000,
-                        tip: '/起',
-                        subtext: '购买',
-                        click: function() {
-                            MessageBox.alert('<img src="https://qiniu.smileyi.top/pay_qrcode2.jpg"/>', '添加客服微信', {
-                                dangerouslyUseHTMLString: true
-                            })
-                        },
-                        list: [
-                            {
-                                title: '私有定制，随心所欲',
-                                check: true
-                            },
-                            {
-                                title: '强大团队，快速赋能你的业务',
-                                check: true
-                            },
-                            {
-                                title: '效果满意，价格美丽',
-                                check: true
-                            }
-                        ]
-                    }]
-            }
-        }
-    }
-}
-</script>
-
diff --git a/src/views/official/header.vue b/src/views/official/header.vue
deleted file mode 100644
index 0b0f46e..0000000
--- a/src/views/official/header.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-    <div class="top-header">
-        <img class="logo" src="@/assets/images/official/TDUCK@2x.png">
-        <div>
-            <span class="menu-item" @click="$router.push({path:'/'})">首页</span>
-            <a class="menu-item" href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a>
-            <a class="menu-item" href="https://doc.tduckapp.com/" target="_blank">开发文档</a>
-            <span class="menu-item" @click="$router.push({path:'/payService'})">付费服务</span>
-            <span class="menu-item add-contact-me">加入社群
-                <div>
-                    <img src="@/assets/images/official/contact_me_qr.png">
-                </div>
-            </span>
-        </div>
-        <div>
-            <el-button v-if="isLogin" @click="$router.push({path:'/home'})">控 制 台</el-button>
-            <el-button v-if="!isLogin" @click="$router.push({path:'/login'})">
-                登 录
-            </el-button>
-        </div>
-    </div>
-</template>
-
-<script>
-import store from '@/store'
-
-export default {
-    name: 'Header',
-    computed: {
-        getStore() {
-            return store
-        },
-        isLogin() {
-            return this.getStore.getters['user/isLogin']
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.top-header {
-    width: 100%;
-    height: 72px;
-    line-height: 72px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-content: center;
-    align-items: center;
-    background: linear-gradient(-67deg, rgb(32, 84, 240), rgba(51, 201, 253, 1), rgba(35, 86, 244, 1));
-    * {
-        z-index: 20;
-    }
-    .logo {
-        width: 182px;
-        height: 28px;
-    }
-    .menu-item {
-        font-size: 17px;
-        font-weight: 300;
-        cursor: pointer;
-        color: #fff;
-        margin-right: 73px;
-        line-height: 72px;
-    }
-    .add-contact-me {
-        position: relative;
-        div {
-            margin-top: 20px;
-            position: absolute;
-            right: 0%;
-            top: 100%;
-            visibility: hidden;
-            opacity: 0;
-            transform: translateY(100px);
-            transition: 0.3s;
-        }
-        img {
-            width: 100px;
-            height: 100px;
-        }
-    }
-    .add-contact-me:hover {
-        div {
-            visibility: visible;
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-    .login-btn {
-        width: 95px;
-        height: 37px;
-        background: #fff;
-        border-radius: 11px;
-    }
-}
-
-</style>
-
diff --git a/src/views/official/index.vue b/src/views/official/index.vue
deleted file mode 100644
index 1618df6..0000000
--- a/src/views/official/index.vue
+++ /dev/null
@@ -1,871 +0,0 @@
-<template>
-    <el-container>
-        <el-header
-            v-if="style.header.isShow"
-            :style="style.header"
-            data-aos="fade-down"
-        >
-            <div class="header-page">
-                <div
-                    class="header-logo"
-                    style="transform: translate(0px, 0px)"
-                    data-aos="fade-right"
-                    @click="$router.push({path:'/'})"
-                >
-                    <img
-                        src="@/assets/images/official/TDUCK@2x.png"
-                        alt="img"
-                    >
-                </div>
-                <div class="header-menu" :class="{ 'header-menu-open': isMenuShow }">
-                    <a @click="$router.push({path:'/'})">首页</a>
-                    <a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a>
-                    <a class="menu-item" href="https://doc.tduckapp.com/" target="_blank">开发文档</a>
-                    <a @click="$router.push({path:'/payService'})">付费服务</a>
-                    <a class="add-contact-me">
-                        加入社群
-                        <div>
-                            <img src="@/assets/images/official/contact_me_qr.png">
-                        </div>
-                    </a>
-                </div>
-
-                <div class="header-btn">
-                    <el-button v-if="isLogin" @click="$router.push({path:'/home'})">控 制 台</el-button>
-                    <el-button v-if="!isLogin" @click="$router.push({path:'/login'})">登 录</el-button>
-                    <div
-                        class="header-mobile-menu"
-                        :class="{ 'header-mobile-menu-open': isMenuShow }"
-                        @click="onShowMenu"
-                    >
-                        <em /><em /><em />
-                    </div>
-                </div>
-            </div>
-        </el-header>
-        <el-main :style="style.content">
-            <div id="back-box" class="back-box" />
-            <div id="content-page" class="content-page">
-                <div class="content-explain">
-                    <h1 data-aos="fade-up" data-aos-duration="1000">让企业轻松拥有问卷系统</h1>
-                    <h1 data-aos="fade-up" data-aos-duration="1100">TDuck - Have what you want, get you income.</h1>
-                    <div data-aos="fade-up" data-aos-duration="1200">
-                        <el-button class="banner-button-start" @click="onStart">开始使用</el-button>
-                        <el-button class="banner-button-preview" @click="$router.push({path:'/home'})">在线预览</el-button>
-                    </div>
-                </div>
-                <div id="image" data-aos="fade-up" class="image">
-                    <img :src="require('@/assets/images/official/banner02.svg')">
-                </div>
-            </div>
-            <div class="content-wrapper">
-                <div class="en-title" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1000">OUR STRENGTHS</div>
-                <el-row :gutter="2" class="content-wrapper-features">
-                    <el-col :xs="24" :md="8" data-aos="fade-right">
-                        <p class="title">无保留，全开源</p>
-                        <p>遵循《阿里巴巴Java开发手册》编码规范，代码全量开源</p>
-                    </el-col>
-                    <el-col :xs="24" :md="8" data-aos="fade-up">
-                        <p class="title">简洁，不失强大</p>
-                        <p>基于 Element + VUE 前端框架，界面简洁，独特美感</p>
-                    </el-col>
-                    <el-col :xs="24" :md="8" data-aos="fade-left">
-                        <p class="title">所见，即所得</p>
-                        <p>无需编程，拖拽可视化模板或组件，即可生成精美问卷</p>
-                    </el-col>
-                </el-row>
-                <div data-aos="zoom-in" data-aos-duration="1000" class="content-wrapper-image">
-                    <img src="@/assets/images/official/desc1.png">
-                </div>
-                <div class="content-wrapper-solutions">
-                    <p class="title">我们的解决方案</p>
-                    <el-row>
-                        <el-col :xs="24" :md="8">
-                            <div class="solution-item" data-aos="zoom-out-up" data-aos-duration="1000">
-                                <p class="title">客户体验</p>
-                                <img src="@/assets/images/official/solution1.png">
-                                <p class="desc">客户满意度 宾馆服务满意度</p>
-                                <p class="desc">餐厅满意度调查 公共服务满意度</p>
-                                <p class="desc">旅游服务满意度 经销商满意度</p>
-                                <p @click="$router.push({ path: '/home' })">前往体验 ></p>
-                            </div>
-                        </el-col>
-                        <el-col :xs="24" :md="8" data-aos="zoom-out-up">
-                            <div class="solution-item" data-aos-duration="1000">
-                                <p class="title">市场调研</p>
-                                <img src="@/assets/images/official/solution2.png">
-                                <p class="desc">餐饮市场调查 手机市场调查</p>
-                                <p class="desc">培训市场调查 消费者调查</p>
-                                <p class="desc">APP市场调查 女性消费者偏好调查</p>
-                                <p @click="$router.push({ path: '/home' })">前往体验 ></p>
-                            </div>
-                        </el-col>
-                        <el-col :xs="24" :md="8" data-aos="zoom-out-up">
-                            <div class="solution-item" data-aos-duration="1000">
-                                <p class="title">报名登记</p>
-                                <img src="@/assets/images/official/solution3.png">
-                                <p class="desc">才艺比赛报名 粉丝活动报名</p>
-                                <p class="desc">聚餐出游报名 活动/会务微信报名</p>
-                                <p class="desc">讲座公开课报名 商品订单</p>
-                                <p @click="$router.push({ path: '/home' })">前往体验 ></p>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </div>
-                <div class="content-wrapper-company">
-                    <p class="title">他们都在使用</p>
-                    <img data-aos="zoom-in" src="@/assets/images/official/use-commony.png">
-                </div>
-            </div>
-        </el-main>
-        <el-footer :style="style.footer">
-            <div class="footer-page">
-                <el-row :gutter="20" class="footer-content">
-                    <el-col :xs="24" :md="6" data-aos="fade-up" data-aos-delay="100">
-                        <h1>关于我们</h1>
-                        <p>
-                            TDuck — 是一款能够帮助
-                            你进行信息收集、市场开拓、
-                            客户挖掘并展开持续营销活 动的管理平台。
-                        </p>
-                    </el-col>
-                    <el-col :xs="24" :md="4" :offset="1" class="project-url" data-aos="fade-up" data-aos-delay="200">
-                        <h1>项目地址</h1>
-                        <a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Gitee码云</a>
-                        <a href="https://github.com/TDuckCloud/tduck-platform" target="_blank">Github</a>
-                    </el-col>
-                    <el-col :xs="24" :md="5" data-aos="fade-up" data-aos-delay="300">
-                        <h1>联系方式</h1>
-                        <span>pr@tduckapp.com</span>
-                        <span>+86 15080929435</span>
-                        <span> 加入团队 mama@tduckapp.com</span>
-                    </el-col>
-                    <el-col :xs="24" :md="4" data-aos="fade-up" data-aos-delay="400">
-                        <h1>友情地址</h1>
-                        <a href="https://element.eleme.cn/#/zh-CN/" target="_blank">ElementUI</a>
-                        <a href="https://gitee.com/mrhj/form-generator" target="_blank"> form-generator</a>
-                    </el-col>
-                    <el-col :xs="24" :md="4" data-aos="fade-up" data-aos-delay="500">
-                        <div class="qrcode">
-                            <div>
-                                <img src="@/assets/images/official/wxmpqrcode.png">
-                                <p class="desc">填鸭-公众号</p>
-                            </div>
-                            <div>
-                                <img src="@/assets/images/official/contact_me_qr.png">
-                                <p class="desc">官方社群</p>
-                            </div>
-                        </div>
-                    </el-col>
-                </el-row>
-                <div class="footer-copyright" data-aos="fade-down" data-aos-anchor-placement="top-bottom">
-                    <p>本站由 ucloud 提供云服务器</p>
-                    <p>本站由 又拍云 提供CDN加速/云储存服务</p>
-                    <p>Copyright © 2021 TDuckApp. All Rights Reserved. 湘ICP备18023961号-2 版权所有</p>
-                </div>
-            </div>
-        </el-footer>
-    </el-container>
-</template>
-
-<script>
-import store from '@/store'
-
-export default {
-    name: 'AppIndex',
-    data() {
-        return {
-            // 是否展开菜单  只在屏幕宽度小于767时有效
-            isMenuShow: false,
-            // 滚动条到顶部的距离
-            scrollTop: 0,
-            // 屏幕宽度
-            screenWidth: document.body.clientWidth,
-            style: {
-                header: {
-                    isShow: true,
-                    isFixed: false,
-                    // background: "linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)",
-                    height: 'unset',
-                    lineHeight: '64px',
-                    background: 'rgba(255,255,255,0)',
-                    position: 'absolute',
-                    width: '100%',
-                    top: 0,
-                    zIndex: 100,
-                    padding: 0
-                    // overflow: "hidden",
-                    // transition:'height 0.5s'
-                },
-                content: {
-                    overflow: 'hidden',
-                    position: 'relative'
-                },
-                footer: {
-                    height: 'auto',
-                    background:
-                        'linear-gradient( 163deg, rgba(32, 84, 241, 0.67), rgba(34, 78, 243, 0.67), rgba(56, 234, 255, 0.67))',
-                    marginTop: '100px'
-                }
-            }
-        }
-    },
-    computed: {
-        getStore() {
-            return store
-        },
-        isLogin() {
-            return this.getStore.getters['user/isLogin']
-        }
-    },
-    watch: {
-        /* 监听屏幕宽度变化 */
-        screenWidth(val) {
-            this.screenWidth = val
-            if (val > 751) {
-                this.isMenuShow = false
-            }
-            console.log('this.screenWidth', this.screenWidth)
-        }
-    },
-    mounted() {
-        window.addEventListener('scroll', this.handleScroll, true)
-        const that = this
-        window.onresize = () => {
-            return (() => {
-                window.screenWidth = document.body.clientWidth
-                that.screenWidth = window.screenWidth
-            })()
-        }
-        this.msgCard()
-    },
-    methods: {
-        // 屏幕滚动方法
-        handleScroll() {
-            // 滚动时收起菜单栏
-            this.isMenuShow = false
-            this.scrollTop =
-                document.documentElement.scrollTop || document.body.scrollTop
-            // 屏幕滚动大于64  设置背景色
-            if (this.scrollTop > 64) {
-                this.style.header.background =
-                    'linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)'
-                this.style.header.position = 'fixed'
-                // 动画
-                if (!this.style.header.isFixed) {
-                    this.style.header.isShow = false
-                    setTimeout(() => {
-                        this.style.header.isShow = true
-                    }, 10)
-                }
-                this.style.header.isFixed = true
-                // this.style.header.height = '0'
-                // this.transition ='height 0.5s'
-                // this.style.header.header = '64px'
-            } else {
-                this.style.header.isFixed = false
-
-                this.style.header.background = 'rgba(255,255,255,0)'
-                // 小于64   判断当前菜单栏是否处于展开状态
-                // if (this.isMenuShow) {
-                //   this.style.header.background =
-                //     "linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)";
-                // } else {
-                //   this.style.header.background = "rgba(255,255,255,0)";
-                // }
-                this.style.header.position = 'absolute'
-            }
-        },
-        // 屏幕变窄时展开和关闭menu的方法
-        onShowMenu() {
-            this.isMenuShow = !this.isMenuShow
-            if (this.isMenuShow) {
-                // 如果展开  设置背景
-                this.style.header.background =
-                    'linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)'
-            } else {
-                // 如果是关闭 则在动画完成之后根据当前是否在顶部修改背景   当前屏幕滚动小于64px：设置透明  否则  显示背景
-                setTimeout(() => {
-                    if (this.scrollTop > 64) {
-                        this.style.header.background =
-                            'linear-gradient(-67deg, #2054f1, #33c9fd, #2356f4)'
-                    } else {
-                        this.style.header.background = 'rgba(255,255,255,0)'
-                    }
-                }, 300)
-            }
-        },
-        onStart() {
-            // window.location.href = 'https://gitee.com/TDuckApp/tduck-platform'
-            window.open('https://gitee.com/TDuckApp/tduck-platform', '_blank')
-        },
-        msgCard() {
-            // <a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">3798</a>
-            this.$notify({
-                title: '关注下 Star 数',
-                duration: 0,
-                position: 'bottom-left',
-                customClass: 'notify-success',
-                dangerouslyUseHTMLString: true,
-                message: '<div style="line-height: 30px">我们需要您的支持，请点击按钮帮助我们增加 gitee star。<span class="github-btn"><a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Start</a></span></div>'
-            })
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-
-.header-page {
-  max-width: 1280px;
-  // box-shadow: rgb(0 0 0 / 5%) 0px 4px 6px;
-  margin: auto;
-  display: flex;
-  padding: 0 24px;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .header-logo {
-    display: inline-block;
-    position: relative;
-    width: 150px;
-    min-width: 150px;
-    line-height: 64px;
-
-    img {
-      width: 100%;
-      vertical-align: middle;
-      display: inline-block;
-    }
-  }
-
-  .header-btn {
-    position: relative;
-    text-align: right;
-
-    button {
-      font-size: 12px;
-      font-weight: 400;
-      background-color: #fff;
-      color: #2667f5;
-      height: 30px;
-      line-height: 30px;
-      padding: 0 15px;
-      border: none;
-      border-radius: 4px;
-    }
-
-    .header-mobile-menu-open {
-      em:nth-child(1) {
-        transform: translateY(6px) rotate(45deg);
-      }
-
-      em:nth-child(2) {
-        opacity: 0;
-      }
-
-      em:nth-child(3) {
-        transform: translateY(-6px) rotate(-45deg);
-      }
-    }
-  }
-
-  .header-menu {
-    a {
-      font-weight: 400;
-      color: #fff;
-      padding: 0 20px;
-    }
-
-    a:first-child {
-      padding-left: 0;
-    }
-
-    a:last-child {
-      padding-right: 0;
-    }
-
-    .add-contact-me {
-      position: relative;
-
-      div {
-        margin-top: 20px;
-        position: absolute;
-        right: 0%;
-        top: 100%;
-        visibility: hidden;
-        opacity: 0;
-        transform: translateY(100px);
-        transition: 0.3s;
-      }
-
-      img {
-        width: 100px;
-        height: 100px;
-      }
-
-    }
-
-    :hover {
-      div {
-        visibility: visible;
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  }
-
-  .header-menu-open {
-    height: calc(48px * 5);
-  }
-}
-
-.back-box {
-  color: #fff;
-  position: absolute;
-  top: -100vh;
-  left: -100px;
-  width: 150vw;
-  // height: 50vw;
-  height: 150vh;
-  border-radius: 0 280px;
-  transform: rotate(-22deg);
-  background: linear-gradient(60deg,#1E53F4,#1E53F4,#30cffd,#30cffd,#30cffd);
-}
-
-.content-page {
-  height: calc(100vh - 64px);
-  color: #fff;
-  // mix-blend-mode: difference;
-  margin-top: 64px;
-  max-width: 1280px;
-  margin: auto;
-  padding: 24px;
-  display: flex;
-  // align-items:center;
-  // text-align: center;
-  position: relative;
-
-  .content-explain {
-    z-index: 1;
-    position: absolute;
-    top: 20%;
-    padding: 0 40px;
-    // min-width: 650px;
-
-    h1:first-child {
-      font-size: 50px;
-    }
-
-    > div {
-      width: 100% !important;
-      margin-top: 40px;
-      text-align: center;
-
-      .banner-button {
-        &-start {
-          min-width: 140px;
-          color: #2667f5;
-          // background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%);
-          box-shadow: 0 8px 24px fade(#ffffff, 35);
-          border-radius: 20px;
-          border: none;
-          padding: 0 42px;
-          line-height: 40px;
-          height: 40px;
-          transition: transform .3s, box-shadow .3s;
-
-          &:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 13px 24px fade(#ffffff, 45);
-            // background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%);
-          }
-        }
-
-        &-preview {
-          box-shadow: 0 8px 24px fade(#ffffff, 35);
-          border-radius: 20px;
-          padding: 0 42px;
-          border: 1px solid #fff;
-          color: #fff;
-          line-height: 40px;
-          height: 40px;
-          background-color: rgba($color: #000000, $alpha: 0);
-          transition: transform .3s, box-shadow .3s;
-
-          &:hover {
-            color: #2667f5;
-            background-color: #FFF;
-            transform: translateY(-5px);
-            transition: all 0.4s ease 0s;
-            box-shadow: 0 13px 24px fade(#ffffff, 45);
-            // background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%);
-          }
-        }
-      }
-    }
-  }
-
-  .image {
-    position: absolute;
-    top: 20%;
-    right: 0;
-    width: 50%;
-
-    img {
-      width: 100%;
-    }
-  }
-}
-
-.content-wrapper {
-  .title {
-    text-align: center;
-    font-size: 23px;
-    font-weight: bold;
-    color: #232323;
-    line-height: 76px;
-  }
-
-  max-width: 1280px;
-  margin: auto;
-  margin-top: 200px;
-  text-align: center;
-
-  .en-title {
-    width: 100%;
-    white-space: nowrap;
-    margin: auto;
-    margin: 100px 0;
-    background: linear-gradient(
-        -32deg,
-        rgba(32, 84, 241, 0.51) 0%,
-        rgba(34, 78, 243, 0.51) 0%,
-        rgba(56, 234, 255, 0.51) 100%
-    );
-    line-height: 7vw;
-    font-size: 6vw;
-    font-weight: bold;
-    letter-spacing: 10%;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  &-features {
-    > div {
-      p:first-child {
-        font-size: 25px;
-        font-weight: bold;
-        color: #222;
-        line-height: 68px;
-      }
-
-      p:last-child {
-        font-size: 10px;
-        font-weight: 300;
-        color: #222;
-        line-height: 22px;
-      }
-    }
-  }
-
-  &-image {
-    width: 100%;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  &-solutions {
-    p {
-      text-align: center;
-      font-size: 23px;
-      font-weight: bold;
-      color: #232323;
-      line-height: 76px;
-    }
-
-    .solution-item {
-      margin: auto;
-      width: 250px;
-      height: 390px;
-      background: linear-gradient(
-          -12deg,
-          rgba(32, 84, 241, 0.08),
-          rgba(34, 78, 243, 0.08),
-          rgba(56, 234, 255, 0.08)
-      );
-      border-radius: 15px;
-      text-align: center;
-      cursor: pointer;
-      transition: transform .3s, box-shadow .3s;
-
-      &:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 2px 49px 0 rgba(105, 119, 168, 0.54);
-      }
-
-      img {
-        width: 197px;
-        height: 147px;
-      }
-
-      .title {
-        font-size: 16px;
-        font-weight: bold;
-        color: #276ef6;
-        line-height: 69px;
-      }
-
-      .desc {
-        font-size: 9px;
-        font-weight: 300;
-        color: #222;
-        line-height: 15px;
-      }
-
-      :last-child {
-        font-size: 10px;
-        font-weight: 300;
-        color: #276ef6;
-        line-height: 69px;
-      }
-    }
-  }
-
-  &-company {
-    display: flex;
-    flex-direction: column;
-    align-content: center;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: 200px;
-
-    img {
-      width: 80%;
-    }
-  }
-}
-
-.footer-page {
-  max-width: 1280px;
-  margin: auto;
-
-  .footer-content {
-    padding: 64px 24px 32px 24px;
-    color: #FFF;
-
-    h1 {
-      font-size: 20px;
-      margin-bottom: 24px;
-    }
-
-    a, span, p {
-      display: block;
-      margin-bottom: 12px;
-      font-size: 12px;
-      font-weight: 400;
-    }
-
-    .qrcode {
-      width: 100%;
-      display: flex;
-      align-content: center;
-
-      div {
-        margin: 10px;
-      }
-
-      img {
-        width: 50%;
-        margin-top: 30px;
-        min-width: 115px;
-        min-height: 114px;
-      }
-    }
-  }
-
-  .footer-copyright {
-    padding-bottom: 12px;
-    text-align: center;
-    color: #FFF;
-    font-weight: 300;
-
-    p {
-      margin-top: 0;
-      margin-bottom: 8px;
-    }
-  }
-}
-
-// @media screen and (max-width: 576px) {
-@media screen and (max-width: 600px) {
-  #back-box {
-    min-width: 450px;
-    min-height: 450px;
-    position: absolute;
-    top: -3%;
-    left: -50%;
-    right: -50%;
-    width: 200vw;
-    // height: 50vw;
-    height: 200vw;
-    border-radius: 50%;
-    transform: rotate(-22deg);
-    background: linear-gradient(-67deg, #30cffd, #1e53f4);
-  }
-  #content-page {
-    padding: 24px 0;
-
-    h1:first-child {
-      font-size: 30px;
-    }
-
-    h1:last-child {
-      font-size: 24px;
-    }
-
-    #image {
-      top: 53% !important;
-      right: 0 !important;
-      width: 100% !important;
-    }
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .el-header {
-    overflow: hidden;
-  }
-  .header-menu {
-    transition: all 0.3s;
-    width: 100%;
-    height: 0;
-    order: 5;
-
-    a {
-      padding: 0 20px !important;
-      display: block;
-      height: 48px;
-      line-height: 48px;
-    }
-  }
-  .header-btn {
-    button {
-      margin-right: 48px;
-    }
-
-    .header-mobile-menu {
-      width: 16px;
-      height: 14px;
-      position: absolute;
-      top: 27px;
-      right: 0;
-      cursor: pointer;
-      float: right;
-      z-index: 100;
-
-      em {
-        display: block;
-        width: 100%;
-        height: 2px;
-        background: #fff;
-        margin-top: 4px;
-        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity;
-      }
-
-      :first-child {
-        margin-top: 0;
-      }
-    }
-  }
-  #content-page {
-    text-align: center;
-
-    > div:first-child {
-      width: 100%;
-      position: unset !important;
-      margin-top: 50px;
-
-      padding: 0;
-      // top: 10% !important;
-    }
-
-    #image {
-      top: 40%;
-      right: 10%;
-      width: 80%;
-    }
-  }
-  .content-wrapper-company {
-    margin-top: 80px !important;
-    img {
-      width: 100% !important;
-    }
-  }
-  .footer-page {
-    text-align: center;
-
-    .project-url {
-      margin-left: 0;
-    }
-  }
-}
-
-@media screen and (min-width: 950px) {
-  .header-btn {
-    width: 150px;
-  }
-}
-
-@media screen and (max-width: 1000px) {
-  #content-page {
-    div:last-child {
-      top: 40%;
-      right: 25%;
-      width: 60%;
-    }
-  }
-}
-</style>
-<style lang="scss">
-.github-btn {
-  a {
-    font-weight: bold;
-    color: #303133;
-    padding: 4px 12px;
-    border: solid 1px #DCDFE6;
-    margin-left: 8px;
-    position: relative;
-    border-radius: 4px;
-  }
-
-  a:hover {
-    color: #2C67E3;
-  }
-
-  a:last-child:before {
-    position: absolute;
-    display: inline-block;
-    border-width: 7px;
-    border-style: solid;
-    border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
-    left: -15px;
-    top: 25%;
-    content: '';
-  }
-
-  /* 小角的背景填充*/
-  a:last-child:after {
-    position: absolute;
-    display: inline-block;
-    border-width: 6px; /*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
-    border-style: solid;
-    border-color: transparent #eee transparent transparent; /*边框颜色（小角的填充色）要与整体元素背景一致*/
-    left: -12px;
-    top: 25%;
-    content: '';
-  }
-}
-</style>
diff --git a/src/views/official/indexbak.vue b/src/views/official/indexbak.vue
deleted file mode 100644
index 18012a4..0000000
--- a/src/views/official/indexbak.vue
+++ /dev/null
@@ -1,508 +0,0 @@
-<template>
-    <div class="official-container">
-        <div class="header-container">
-            <div class="background">
-                <img src="@/assets/images/official/background.svg">
-            </div>
-            <div id="headerNav" :class="{'is-fixed' : isFixed}" class="top-header">
-                <img class="logo" src="@/assets/images/official/TDUCK@2x.png" @click="$router.push({path:'/'})">
-                <div>
-                    <span class="menu-item" @click="$router.push({path:'/'})">首页</span>
-                    <a class="menu-item" href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a>
-                    <a class="menu-item" href="https://doc.tduckapp.com/" target="_blank">开发文档</a>
-                    <span class="menu-item" @click="$router.push({path:'/payService'})">付费服务</span>
-                    <span class="menu-item add-contact-me">加入社群
-                        <div>
-                            <img src="@/assets/images/official/contact_me_qr.png">
-                        </div>
-                    </span>
-                </div>
-                <div>
-                    <el-button v-if="isLogin" @click="$router.push({path:'/home'})">控 制 台</el-button>
-                    <el-button v-if="!isLogin" @click="$router.push({path:'/login'})">
-                        登 录
-                    </el-button>
-                </div>
-            </div>
-            <div class="content-header">
-                <div class="left">
-                    <p class="slogan animate__animated animate__fadeInLeftBig">
-                        让企业轻松拥有问卷系统
-                    </p>
-                    <p class="slogan-desc animate__animated animate__fadeInLeftBig">
-                        TDuck - Have what you want,
-                        get you income.
-                    </p>
-                    <el-button @click="$router.push({path:'/home'})">立即体验</el-button>
-                </div>
-                <div class="right">
-                    <img
-                        class="image"
-                        :src="require('@/assets/images/official/banner02.svg')"
-                        fit="scale-down"
-                    >
-                </div>
-            </div>
-        </div>
-        <div class="introduction">
-            <p class="en-title">OUR STRENGTHS</p>
-            <div class="features">
-                <div>
-                    <p> 无保留，全开源</p>
-                    <p> 遵循《阿里巴巴Java开发手册》编码规范，代码全量开源</p>
-                </div>
-                <div>
-                    <p> 简洁，不失强大</p>
-                    <p> 基于 Element + VUE 前端框架，界面简洁，独特美感</p>
-                </div>
-                <div>
-                    <p> 所见，即所得</p>
-                    <p> 无需编程，拖拽可视化模板或组件，即可生成精美问卷</p>
-                </div>
-            </div>
-            <img class="img1" src="@/assets/images/official/desc1.png">
-        </div>
-        <p class="title">我们的解决方案</p>
-        <div class="solutions">
-            <div class="solution-item">
-                <p class="title">客户体验</p>
-                <img src="@/assets/images/official/solution1.png">
-                <p class="desc">客户满意度 宾馆服务满意度 </p>
-                <p class="desc"> 餐厅满意度调查 公共服务满意度</p>
-                <p class="desc">旅游服务满意度 经销商满意度 </p>
-                <p @click="$router.push({path:'/home'})">前往体验 ></p>
-            </div>
-            <div class="solution-item">
-                <p class="title">市场调研</p>
-                <img src="@/assets/images/official/solution2.png">
-                <p class="desc">餐饮市场调查 手机市场调查 </p>
-                <p class="desc"> 培训市场调查 消费者调查 </p>
-                <p class="desc">APP市场调查 女性消费者偏好调查 </p>
-                <p @click="$router.push({path:'/home'})">前往体验 ></p>
-            </div>
-            <div class="solution-item">
-                <p class="title">报名登记</p>
-                <img src="@/assets/images/official/solution3.png">
-                <p class="desc">才艺比赛报名 粉丝活动报名 </p>
-                <p class="desc"> 聚餐出游报名 活动/会务微信报名 </p>
-                <p class="desc"> 讲座公开课报名 商品订单 </p>
-                <p @click="$router.push({path:'/home'})">前往体验 ></p>
-            </div>
-        </div>
-        <div class="use-company">
-            <p class="title">他们都在使用</p>
-            <img src="@/assets/images/official/use-commony.png">
-        </div>
-        <div class="footer">
-            <div class="top">
-                <div>
-                    <p class="title">关于我们</p>
-                    <p class="desc">
-                        TDuck — 是一款能够帮助
-                        你进行信息收集、市场开拓、
-                        客户挖掘并展开持续营销活 动的管理平台。
-                    </p>
-                </div>
-                <div>
-                    <p class="title">项目地址</p>
-                    <a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Gitee码云</a>
-                    <a href="https://github.com/TDuckCloud/tduck-platform" target="_blank">Github</a>
-                </div>
-                <div>
-                    <p class="title">联系方式</p>
-                    <p class="desc">pr@tduckapp.com</p>
-                    <p class="desc">+86 15080929435</p>
-                    <p class="desc"> 加入团队 mama@tduckapp.com</p>
-                </div>
-                <div>
-                    <p class="title">友情地址</p>
-                    <a href="https://element.eleme.cn/#/zh-CN/" target="_blank">ElementUI</a>
-                    <a href="https://gitee.com/mrhj/form-generator" target="_blank"> form-generator</a>
-                </div>
-                <div class="qrcode">
-                    <div>
-                        <img src="@/assets/images/official/wxmpqrcode.png">
-                        <p class="desc">填鸭-公众号</p>
-                    </div>
-                    <div>
-                        <img src="@/assets/images/official/contact_me_qr.png">
-                        <p class="desc">官方社群</p>
-                    </div>
-                </div>
-            </div>
-            <div class="bottom">
-                <p>本站由 ucloud 提供云服务器</p>
-                <p>本站由 又拍云 提供CDN加速/云储存服务</p>
-                <p>Copyright © 2021 TDuckApp. All Rights Reserved. 湘ICP备18023961号-2 版权所有</p>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import store from '@/store'
-
-export default {
-    name: 'Official',
-    data() {
-        return {
-            isFixed: false,
-            offsetTop: 0
-        }
-    },
-    computed: {
-        getStore() {
-            return store
-        },
-        isLogin() {
-            return this.getStore.getters['user/isLogin']
-        }
-    },
-    mounted() {
-        window.addEventListener('scroll', this.initHeight)
-        let that = this
-        this.$nextTick(() => {
-            // 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
-            that.offsetTop = document.querySelector('#headerNav').offsetTop
-        })
-    },
-    // 回调中移除监听
-    destroyed() {
-        window.removeEventListener('scroll', this.handleScroll)
-    },
-    methods: {
-        initHeight() {
-            // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
-            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-            // 如果被卷曲的高度大于吸顶元素到顶端位置 的距离
-            this.isFixed = scrollTop > this.offsetTop
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-html,
-body {
-  height: 100%;
-}
-.official-container {
-  min-width: 1280px;
-  height: 100%;
-  //overflow-x: hidden;
-}
-.header-container {
-  position: relative;
-  .background {
-    position: absolute;
-    z-index: 1;
-    img {
-      width: 100%;
-    }
-  }
-  .top-header {
-    width: 100%;
-    height: 72px;
-    line-height: 72px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-content: center;
-    align-items: center;
-    * {
-      z-index: 20;
-    }
-    .logo {
-      width: 182px;
-      height: 28px;
-    }
-    .menu-item {
-      font-size: 17px;
-      font-weight: 300;
-      cursor: pointer;
-      color: #fff;
-      margin-right: 73px;
-      line-height: 72px;
-    }
-    .add-contact-me {
-      position: relative;
-      div {
-        margin-top: 20px;
-        position: absolute;
-        right: 0%;
-        top: 100%;
-        visibility: hidden;
-        opacity: 0;
-        transform: translateY(100px);
-        transition: 0.3s;
-      }
-      img {
-        width: 100px;
-        height: 100px;
-      }
-    }
-    .add-contact-me:hover {
-      div {
-        visibility: visible;
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-    .login-btn {
-      width: 95px;
-      height: 37px;
-      background: #fff;
-      border-radius: 11px;
-    }
-  }
-  .content-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    * {
-      z-index: 20;
-    }
-    .slogan {
-      font-size: 59px;
-      font-weight: bold;
-      color: #fff;
-      line-height: 18px;
-    }
-    .slogan-desc {
-      font-size: 37px;
-      font-weight: bold;
-      color: #fff;
-      line-height: 43px;
-    }
-    .right{
-      position: relative;
-      height: 700px;
-      width: 700px;
-      .image {
-        padding-top: 30px;
-        height: 840px;
-        width: 700px;
-      }
-    }
-  }
-}
-.title {
-  text-align: center;
-  font-size: 23px;
-  font-weight: bold;
-  color: #232323;
-  line-height: 76px;
-}
-.introduction {
-  margin-top: 217px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  .en-title {
-    font-size: 101px;
-    font-weight: bold;
-    color: #fff;
-    line-height: 97px;
-    letter-spacing: 15px;
-    background: linear-gradient(-32deg, rgba(32, 84, 241, 0.51) 0%, rgba(34, 78, 243, 0.51) 0%, rgba(56, 234, 255, 0.51) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    animation: show 0.5s forwards;
-  }
-  .features {
-    display: flex;
-    div {
-      margin: 0 20px;
-      text-align: center;
-    }
-    :first-child {
-      font-size: 25px;
-      font-weight: bold;
-      color: #222;
-      line-height: 68px;
-    }
-    :last-child {
-      font-size: 10px;
-      font-weight: 300;
-      color: #222;
-      line-height: 22px;
-    }
-  }
-  .img1 {
-    min-width: 515px;
-    height: 438px;
-  }
-}
-.solutions {
-  width: 80%;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-evenly;
-  .solution-item {
-    width: 250px;
-    height: 390px;
-    background: linear-gradient(-12deg, rgba(32, 84, 241, 0.08), rgba(34, 78, 243, 0.08), rgba(56, 234, 255, 0.08));
-    border-radius: 15px;
-    text-align: center;
-    cursor: pointer;
-    &:hover {
-      box-shadow: 0 2px 49px 0 rgba(105, 119, 168, 0.54);
-    }
-    img {
-      width: 197px;
-      height: 147px;
-    }
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #276ef6;
-      line-height: 69px;
-    }
-    .desc {
-      font-size: 9px;
-      font-weight: 300;
-      color: #222;
-      line-height: 15px;
-    }
-    :last-child {
-      font-size: 10px;
-      font-weight: 300;
-      color: #276ef6;
-      line-height: 69px;
-    }
-  }
-}
-.use-company {
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 200px;
-
-}
-.footer {
-  margin-top: 227px;
-  width: 100%;
-  height: 464px;
-  background: linear-gradient(163deg, rgba(32, 84, 241, 0.67), rgba(34, 78, 243, 0.67), rgba(56, 234, 255, 0.67));
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  .top {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    text-align: left;
-    .title {
-      font-size: 20px;
-      font-weight: bold;
-      color: #fff;
-      line-height: 60px;
-      text-align: left;
-    }
-    .desc {
-      font-size: 12px;
-      font-weight: 300;
-      color: #fff;
-      line-height: 20px;
-      max-width: 292px;
-    }
-    a {
-      font-size: 12px;
-      font-weight: 300;
-      color: #fff;
-      cursor: pointer;
-      line-height: 30px;
-      display: block;
-    }
-    .qrcode {
-      display: flex;
-      div {
-        margin: 10px;
-      }
-      img {
-        margin-top: 30px;
-        width: 115px;
-        height: 114px;
-      }
-    }
-  }
-  .bottom {
-    position: relative;
-    bottom: 0;
-    p {
-      text-align: center;
-      font-size: 16px;
-      font-weight: 300;
-      color: #fff;
-      line-height: 20px;
-    }
-  }
-}
-.top-header {
-  animation: stickyMenu1 0.4s ease-in-out;
-}
-.is-fixed {
-  position: fixed;
-  z-index: 999;
-  animation: stickyMenu 0.5s ease-in-out;
-  top: 0;
-  background: linear-gradient(-67deg, rgba(32, 84, 241, 1), rgba(51, 201, 253, 1), rgba(35, 86, 244, 1));
-}
-@keyframes stickyMenu1 {
-  0% {
-    opacity: 0;
-    background: rgba(32, 84, 241, 1);
-  }
-  50% {
-    opacity: 0.5;
-    background: rgba(32, 84, 241, 1);
-  }
-  100% {
-    background-color: transparent;
-    opacity: 1;
-  }
-}
-@keyframes stickyMenu {
-  0% {
-    margin-top: -120px;
-    opacity: 0;
-  }
-  50% {
-    margin-top: -64px;
-    opacity: 0;
-  }
-  100% {
-    margin-top: 0;
-    opacity: 1;
-  }
-}
-@media only screen and (max-width: 1580px) {
-  .content-header {
-    .slogan-desc {
-      font-size: 25px !important;
-    }
-  }
-}
-@media only screen and (max-width: 1280px) {
-  .content-header {
-    .slogan {
-      font-size: 39px !important;
-    }
-    .slogan-desc {
-      font-size: 20px !important;
-    }
-  }
-}
-::v-deep .el-button {
-  border: none;
-}
-::v-deep .el-button span {
-  font-weight: 400;
-  color: #2667f5;
-}
-</style>

From 71cbd933c77c364102d85f80e2123a1dfc801bea Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Mon, 27 Sep 2021 15:57:34 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/form/preview/ProjectForm.vue |  2 +-
 src/views/form/theme/index.vue         | 86 ++++++++++++++++++++++----
 2 files changed, 76 insertions(+), 12 deletions(-)

diff --git a/src/views/form/preview/ProjectForm.vue b/src/views/form/preview/ProjectForm.vue
index 0e565a4..231714c 100644
--- a/src/views/form/preview/ProjectForm.vue
+++ b/src/views/form/preview/ProjectForm.vue
@@ -295,7 +295,7 @@ export default {
 @import "@/assets/styles/elementui-mobile.scss";
 .project-form {
   margin: 15px auto;
-  width: 800px;
+  width: 100%;
   padding: 15px;
   background-repeat: repeat;
   background-color: rgba(229, 239, 247, 0.87);
diff --git a/src/views/form/theme/index.vue b/src/views/form/theme/index.vue
index db1a4fa..fa96b6b 100644
--- a/src/views/form/theme/index.vue
+++ b/src/views/form/theme/index.vue
@@ -3,23 +3,41 @@
     <div class="left-container">
       <el-scrollbar class="left-scrollbar-container">
         <p class="theme-title">外观主题</p>
-        <el-row>
-          <el-col :span="3">
+        <div class="tag-wr">
+          <div class="tag-title">风格</div>
+          <div class="tag-list">
+            <div v-for="item in styleList" :key="item.key" class="tag-item"
+            :class="{'tag-item-on':activeStyle==item.key}" @click="activeStyleHandle(item)">
+              {{ item.label }}</div>
+          </div>
+        </div>
+        <!-- <el-row>
+          <el-col :span="6">
             <span class="theme-prompt-text">风格</span>
           </el-col>
           <el-col v-for="item in styleList"
                   :key="item.key"
-                  :span="3">
+                  :span="6">
             <span :class="{'style-btn-active':activeStyle==item.key}"
                   class="style-btn"
                   @click="activeStyleHandle(item)">{{ item.label }}</span>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="3">
+        </el-row> -->
+        <div class="tag-wr">
+          <div class="tag-title">颜色</div>
+          <div class="tag-list">
+            <div class="tag-item"
+            :class="{'tag-item-on':activeColor==''}" @click="activeColorHandle('')">全部</div>
+            <div v-for="c in colorList" :key="c" class="tag-item tag-c"
+            :style="{backgroundColor: c}"
+            :class="{'tag-item-on':activeColor==c}" @click="activeColorHandle(c)"></div>
+          </div>
+        </div>
+        <!-- <el-row>
+          <el-col :span="6">
             <span class="theme-prompt-text">颜色</span>
           </el-col>
-          <el-col :span="3">
+          <el-col :span="6">
             <span :class="{'style-btn-active':activeColor==''}"
                   class="style-btn"
                   @click="activeColorHandle('')">全部</span>
@@ -27,11 +45,11 @@
           <el-col v-for="c in colorList"
                   :key="c"
                   :class="{'style-btn-active':activeColor==c}"
-                  :span="3"
+                  :span="6"
                   :style="{backgroundColor: c}"
                   class="color-btn"
                   @click.native="activeColorHandle(c)" />
-        </el-row>
+        </el-row> -->
         <el-row>
           <el-col v-for="t in themeList"
                   :key="t.id"
@@ -411,7 +429,7 @@ export default {
 }
 .left-scrollbar-container {
   height: 100%;
-  margin: 20px;
+  margin: 20px 10px 20px 10px;
 }
 ::v-deep .el-scrollbar__wrap {
   overflow-x: hidden !important;
@@ -426,7 +444,7 @@ export default {
   border: 1px solid #eaeaea;
 }
 .preview-container {
-  width: 70%;
+  width: 60%;
 }
 .theme-title {
   color: rgba(16, 16, 16, 100);
@@ -519,3 +537,49 @@ export default {
   text-align: left;
 }
 </style>
+
+<style lang="scss" scoped>
+.tag-wr {
+  width: 100%;
+  display: flex;
+  margin-bottom: 10px;
+  .tag-title {
+    flex-shrink: 0;
+    width: 50px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .tag-list {
+    // flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    .tag-item {
+      box-sizing: border-box;
+      margin: 0px 6px 6px 0;
+      // line-height: 30px;
+      border-radius: 4px;
+      padding: 3px;
+      color: #707070;
+      font-size: 14px;
+      text-align: center;
+      cursor: pointer;
+      border: 1px solid #eaeaea;
+    }
+    .tag-item:nth-child(4n) {
+      margin-right: 0;
+    }
+    
+    .tag-c {
+      width: 40px;
+      height: 20px;
+      border: 0;
+    }
+    .tag-c:hover {
+      border: 1px solid rgba(11, 141, 213, 100);
+    }
+    .tag-item-on {
+      border: 1px solid rgba(11, 141, 213, 100);
+    }
+  }
+}
+</style>