0.0.1版本提交

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "zyos-admin",
-  "version": "0.1.0",
+  "name": "zyosAdmin",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -37,6 +37,7 @@
     "js-cookie": "^2.2.1",
     "litepicker": "^1.5.7",
     "lodash": "^4.17.20",
+    "node-sass": "^4.14.1",
     "postcss-loader": "3",
     "raw-loader": "0.5.1",
     "sass-loader": "^9.0.2",
@@ -48,6 +49,7 @@
     "vue-chartjs": "^3.5.1",
     "vue-feather-icons": "^5.1.0",
     "vue-router": "^3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-slick-carousel": "^1.0.6",
     "vue-tippy": "^4.7.2",
     "vue2-dropzone": "^3.6.0",
@@ -67,7 +69,6 @@
     "eslint": "^7.14.0",
     "eslint-plugin-prettier": "^3.2.0",
     "eslint-plugin-vue": "^7.2.0",
-    "node-sass": "^4.12.0",
     "prettier": "^2.2.1",
     "tailwindcss": "^1.5.1",
     "vue-template-compiler": "^2.6.12"

src/App.vue

@@ -1,10 +1,24 @@
 <template>
   <div id="app">
     <router-view />
+ 
+    <!-- <betaPop /> -->
   </div>
 </template>
 
+<script>
+import betaPop from './modules/betaPop'
+export default {
+ 
+}
+</script>
+ 
 
 <style scoped>
 
+#app {
+  width: 100%;
+  height: 100%;
+}
+
 </style>

src/assets/sass/_app.scss

@@ -4,6 +4,131 @@
     @apply py-5;
 }
 
+::-webkit-scrollbar {
+     display: none;
+  }
+
 .CursorPointer {
     cursor: pointer;
-  }
+}
+
+.el-step__icon.is-text {
+    border: none !important;
+    background: #EEF2F7 !important;
+    color: #788598 !important;
+    height: 40px;
+    width: 40px;
+    font-size: 16px;
+}
+
+.is-finish .el-step__icon.is-text {
+    background: #1890FF !important;
+    color: #FFF !important;
+
+}
+
+.el-step__title.is-finish {
+    color: #333333;
+    font-size: 16px;
+}
+
+.el-step__description.is-finish {
+    color: #999999;
+    font-size: 12px;
+}
+
+
+.el-step.is-horizontal .el-step__line {
+    top: 19px !important;
+    border-width: 2px !important;
+    width: 80%;
+    left: 60%;
+}
+ 
+.is-process .is-text {
+    background: #1890FF !important;
+    color: #FFF !important;
+}
+
+.el-step__head.is-process   {
+     border-color: #C0C4CC !important;
+}
+
+.el-step__description.is-process {
+    color: #999999;
+
+}
+.el-step__title.is-process {
+    color: #333333;
+    font-weight: 100;
+
+}
+
+.el-step__description.is-wait {
+    color: #999999;
+
+}
+
+.el-step__title.is-wait {
+    color: #333333;
+
+}
+
+.el-pager li.active {
+    background: #FFF;
+    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 7px;
+}
+
+.el-pager li {
+    width: 40px;
+    height: 37px;
+    line-height: 37px;
+    color: #2D3748 !important;
+    font-size: 14px !important;
+}
+.el-pagination .btn-prev ,.el-pagination .btn-next  {
+    margin-top: 4px;
+}
+
+.el-pager li.btn-quickprev {
+    line-height: 36px;
+}
+
+.el-table .cell {
+    padding-right: 4px;
+}
+
+.promotionCode-box .el-input__inner {
+    border-radius: 12px;
+}
+
+.PhoneCode-box .el-input__inner {
+    border-radius: 12px;
+}
+
+.createAn7-box .el-input__inner {
+    border-radius: 12px;
+    border: none;
+    background: #EEF2F7;
+}
+
+.avatar-uploader-icon {
+    padding: 5px;
+    border-radius: 50%;
+    border: 1px solid #788598;
+}
+.el-carousel__indicators--outside {
+    display: none;
+}
+
+ 
+.el-carousel__arrow--right {
+    display: none;
+
+}
+
+.el-carousel__arrow--left {
+    display: none;
+
+}

src/assets/sass/_login.scss

@@ -6,11 +6,11 @@
         background-attachment: fixed;
     }
     &:before {
+        margin-left: -46%;
         content: "";
-        margin-left: -48%;
         background-image: url(../images/bg-login-page.svg);
         background-repeat: no-repeat;
-        background-size: auto 100%;
+        // background-size: 100%;
         background-position: right;
         @apply w-full h-full absolute top-0 left-0;
         @media (max-width: $xl) {

src/assets/sass/app2.scss

@@ -2,14 +2,14 @@
 @import 'breakpoint';
 
 // // 3rd Parties
-// @import '~highlight.js/scss/github';
-// @import '~vue-slick-carousel/dist/vue-slick-carousel';
-// @import '~vue-slick-carousel/dist/vue-slick-carousel-theme';
-// @import '~tail.select/css/default/tail.select-light';
-// @import '~toastify-js/src/toastify';
-// @import '~dropzone/dist/dropzone';
-// @import '~zoom-vanilla.js/dist/zoom';
-// @import '~tabulator-tables/dist/css/tabulator';
+@import '~highlight.js/scss/github';
+@import '~vue-slick-carousel/dist/vue-slick-carousel';
+@import '~vue-slick-carousel/dist/vue-slick-carousel-theme';
+@import '~tail.select/css/default/tail.select-light';
+@import '~toastify-js/src/toastify';
+@import '~dropzone/dist/dropzone';
+@import '~zoom-vanilla.js/dist/zoom';
+@import '~tabulator-tables/dist/css/tabulator';
 
 // Animations
 // @import 'typing-dots';

src/components/TopBar.vue

@@ -16,7 +16,13 @@
     >
       <div>智莺生活</div>
       <ChevronRightIcon class="breadcrumb__icon" />
-      <div class="breadcrumb--active">{{ this.$route.meta.title }}</div>
+
+      <router-link class="breadcrumb--active" :to="roterLink(title[0])">{{
+        title[0]
+      }}</router-link>
+
+      <ChevronRightIcon class="breadcrumb__icon" v-if="title[1]" />
+      <div class="breadcrumb--active">{{ title[1] }}</div>
     </div>
 
     <!-- END: Notifications -->
@@ -61,7 +67,7 @@
               class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md CursorPointer"
             >
               <ToggleRightIcon class="w-4 h-4 mr-2" />
-              退出登陆
+              退出登录
             </span>
           </div>
         </div>
@@ -221,6 +227,25 @@ export default {
       isUserNmae: true, // 控制显示
     };
   },
+  computed: {
+    title: function () {
+      if (typeof this.$route.meta.title == "object") {
+        return this.$route.meta.title;
+      } else {
+        return new Array(this.$route.meta.title);
+      }
+    },
+
+    roterLink: function () {
+      return function (value) {
+        return this.$store.state.sideMenu.menu.filter((item) => {
+          return item.title == value;
+        })[0].url;
+      };
+    },
+  },
+
+  created() {},
   methods: {
     showSearchDropdown() {
       this.searchDropdown = true;

src/components/global/LoadingIcon.vue

@@ -772,7 +772,7 @@ export default {
     },
     color: {
       type: String,
-      default: "#2d3748"
+      default: "#1890FF"
     }
   }
 };

src/layouts/SideMenu.vue

@@ -126,6 +126,7 @@
       <!-- BEGIN: Content -->
       <div class="content">
         <TopBar />
+ 
         <router-view />
       </div>
       <!-- END: Content -->

src/modules/Crad2.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="card_body intro-x" @change="isCard == true?isCard = true :''">
+    <div class="card_header">
+      <div class="img-box">
+        <div class="LeftPng">
+          <img src="@/assets/images/niao.png" alt="" />
+        </div>
+        <span> 智莺生活</span>
+      </div>
+      <div class="cardRihgt">
+        <div class="icon-box" @click="setCard">
+          <i class="el-icon-more" style="font-size: 20px; color: #bbc6da"></i>
+        </div>
+      </div>
+      <div class="cardRight2">
+        <img :src="CardData.img" alt="" />
+        <span>11个模块</span>
+      </div>
+    </div>
+    <div class="cardListText">
+      <ul>
+        <li>
+          <span class="leftText">版本信息</span>
+          <span class="rightText">授信版本</span>
+        </li>
+        <li>
+          <span class="leftText">APPKEY</span>
+          <span class="rightText">21524564545</span>
+        </li>
+        <li>
+          <span class="leftText">到期时间</span>
+          <span class="rightText">2021-01-10</span>
+        </li>
+      </ul>
+    </div>
+    <div class="cardButtom">查看详情</div>
+
+    <div class="Card-box -intro-x" v-if="isCard">
+        <div class="card-item cardClass" @click="getCardIiem('停用此软件')">停用此软件</div>
+        <div class="card-item cardClass" @click="getCardIiem('前往后台设置')" >前往后台设置</div>
+        <div class="card-item" style="color:#FF4242" @click="getCardIiem('删除此软件')">删除此软件</div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["CardData"],
+  data() {
+    return {
+      isCard: false,
+    };
+  },
+  mounted(){
+ 
+  },
+  created() {},
+  methods: {
+    setCard: function () {
+      this.isCard = !this.isCard;
+    },
+
+    getCardIiem: function( value ){
+        if(value === '删除此软件') {
+            this.$emit('getCardPop', true)
+            this.isCard = false
+        } else {
+            this.isCard = false
+        }
+        
+    }
+  },
+};
+</script>
+
+<style scoped>
+/* pc */
+@media screen and (max-width: 1172px) {
+  .card_body {
+    min-width: 47.2% !important;
+  }
+  .itemBoxB {
+    width: 100% !important;
+    margin-left: 0 !important;
+    padding: 24px !important;
+    display: block !important;
+    float: none !important;
+  }
+}
+
+@media screen and (max-width: 690px) {
+  .card_body {
+    width: 100% !important;
+    display: block !important;
+    float: none !important;
+    padding-right: 54px !important;
+    border-radius: 0 !important;
+    min-width: 420px !important;
+  }
+}
+
+.card_body {
+  float: left;
+  width: 23%;
+  /* width: 372px; */
+  min-width: 310px;
+  background: #fff;
+  height: 328px;
+  margin: 0 2% 20px 0;
+  border-radius: 8%;
+  box-sizing: border-box;
+  padding: 24px;
+  position: relative;
+}
+
+.card_body:hover {
+  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);
+}
+
+.card_header {
+  width: 100%;
+  font-size: 26px;
+  color: #333333;
+  overflow: hidden;
+  margin-bottom: 5px;
+}
+
+.img-box {
+  float: left;
+}
+
+.LeftPng {
+  width: 75px;
+  height: 75px;
+  border-right: 16px;
+  overflow: hidden;
+  border-radius: 23px;
+}
+
+.LeftPng > img {
+  height: 75px;
+  width: 75px;
+  vertical-align: middle;
+}
+
+.cardRihgt {
+  float: right;
+}
+
+.icon-box {
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  line-height: 26px;
+  border: 1px solid #bbc6da;
+  box-sizing: border-box;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.cardRight2 {
+  width: 105px;
+  height: 32px;
+  background: #ffffff;
+  border: 1px solid #bbc6da;
+  border-radius: 16px;
+  float: right;
+  margin-right: 10px;
+  color: #bbc6da;
+  font-size: 12px;
+  line-height: 32px;
+  font-weight: 400;
+  position: relative;
+  text-indent: 40px;
+}
+
+.cardRight2 > img {
+  height: 32px;
+  width: 32px;
+  border-radius: 50%;
+  position: absolute;
+  left: -1px;
+  top: -1px;
+}
+
+.cardListText,
+ul,
+li {
+  overflow: hidden;
+  width: 100%;
+}
+
+.cardListText li {
+  line-height: 28px;
+}
+
+.leftText {
+  float: left;
+  color: #999999;
+  font-size: 16px;
+}
+.rightText {
+  float: right;
+  color: #333333;
+  font-size: 16px;
+}
+
+.cardButtom {
+  background: #f7f7fa;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-radius: 22px;
+  text-align: center;
+  line-height: 56px;
+  color: #8f9cc6;
+  font-size: 16px;
+  margin-top: 30px;
+}
+
+.cardButtom:hover {
+  background: #1890fa;
+  color: #fff;
+  cursor: pointer;
+}
+
+.cardButtom:active {
+  background: #58b0fd;
+}
+
+.Card-box {
+  position: absolute;
+  width: 200px;
+  height: 138px;
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+  right: 20px;
+  top: 65px;
+}
+.card-item {
+    line-height: 46px;
+    height: 46px;
+    width: 100%;
+    text-indent: 16px;
+    font-size: 14;
+    color: #BBC6DA;
+    cursor: pointer;
+}
+
+.cardClass:hover {
+    background: #F7F8FB;
+    color: #1890FF;
+
+}
+
+ 
+
+</style>

src/modules/betaPop.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="betaPop-box" @touchmove.prevent>
+        <div class="maskLayer"></div>
+        <div class="betaToast">123</div>
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style lang="scss" scoped>
+
+.betaPop-box {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+}
+
+
+.maskLayer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 18888;
+	background-color: #000000;
+    opacity: 0.7;
+    width: 100%;
+    height: 100%;
+}
+
+.betaToast {
+    /*弹窗*/
+    width: 460px;
+    height: 377px;
+    padding: 20px 20px 0 20px;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border-radius: 22px;
+    position: fixed;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 99999;
+}
+
+
+
+</style>

src/modules/createAn1.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="createAn1-box">
+    <div
+      class="inlineblock left-box"
+      :class="{ an1Active: item.laber }"
+      @click="item.laber = !item.laber"
+      v-for="(item, index) in ceateData1"
+      :key="index"
+    >
+      <img src="@/assets/images/chuagnjian2.png" alt="" />
+      <ul class="rightUl">
+        <li class="list1">{{ item.title }}</li>
+        <li class="list2">¥ {{ item.money }}起</li>
+        <li class="list3">{{ item.content }}</li>
+        <li class="list4">查看详情</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isType: null,
+      ceateData1: [
+        {
+          money: 19999,
+          title: "导购功能",
+          laber: false,
+          content:
+            "打通社交渠道，分享传播更便捷 海量营销模式供选择 不支持授信模式",
+        },
+        {
+          money: 19999,
+          title: "自营功能",
+          laber: false,
+          content: `打通社交渠道，分享传播更便捷 海量营销模式供选择 不支持授信模式`,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.createAn1-box {
+  text-align: center;
+  width: 100%;
+  margin-top: 30px;
+  .inlineblock {
+    display: inline-block;
+    width: 471px;
+    height: 283px;
+    background: #ffffff;
+    border: 2px solid #eef2f7;
+    border-radius: 16px;
+    overflow: hidden;
+    position: relative;
+    img {
+      height: 100%;
+      float: left;
+    }
+    .rightUl {
+      float: left;
+      min-width: 169px;
+      width: 169px;
+      text-align: left;
+      padding-top: 38px;
+      .list1 {
+        color: #2d3748;
+        font-size: 18px;
+        margin-bottom: 10px;
+      }
+      .list2 {
+        color: #ff2020;
+        font-size: 18px;
+      }
+      .list3 {
+        font-size: 12px;
+        color: #999999;
+        line-height: 25px;
+      }
+      .list4 {
+        width: 114px;
+        height: 32px;
+        background: #1890ff;
+        box-shadow: 0px 3px 6px rgba(24, 144, 255, 0.3);
+        border-radius: 16px;
+        color: #fff;
+        text-align: center;
+        line-height: 32px;
+        margin-top: 20px;
+      }
+      .list4:active {
+        background: #2d97fa;
+      }
+    }
+  }
+
+  .right-box {
+    margin-left: 20px;
+  }
+
+  .an1Active {
+    border-color: #1890ff;
+  }
+}
+
+.left-box:nth-child(1) {
+  margin-right: 20px;
+}
+</style>

src/modules/createAn2.vue

@@ -0,0 +1,453 @@
+<template>
+  <div>
+    <div class="createAn2-header intro-x">
+      <span
+        class="span1"
+        :class="{ spanActive: item.laber }"
+        @click="setIsList(index)"
+        v-for="(item, index) in ceateData"
+        :key="index"
+        >{{ item.title }}</span
+      >
+    </div>
+
+    <div class="createAn2-title intro-x">
+      <div class="left">
+        <div class="div1">内置功能模块</div>
+        <div class="div2">再选 9 个享受套餐价</div>
+      </div>
+      <div class="right">
+        <span class="span1" v-show="spanNum >= 1">已选{{ spanNum }}个</span>
+        <span class="span2" @click="getMokuaiDataLabel">{{ laberText }}</span>
+      </div>
+    </div>
+    <div class="createAn2-html">
+      <div class="createAn2-content intro-x">
+        <div
+          :class="{ ActiveIiem: item.laber }"
+          class="item-box"
+          v-for="(item, index) in ceateData2"
+          :key="index"
+          @click="item.laber = !item.laber"
+        >
+          <div class="div-top">
+            <img class="mokuai-img" :src="item.laber ? imgs1 : imgs2" alt="" />
+            <div class="mokuai-right">
+              <div class="rightTitle">{{ item.title }}</div>
+              <div class="rightContent">
+               支持： {{ item.content }}
+              </div>
+            </div>
+          </div>
+          <div style="float: left">
+            <div class="yuanMoney">原价¥ {{ item.original }}</div>
+            <div class="taoMoney">套餐价¥ {{ item.preferential }}</div>
+          </div>
+          <div
+            v-show="item.laber == true"
+            class="float-yuan"
+            :class="{ 'el-icon-check': item.laber }"
+          ></div>
+        </div>
+      </div>
+    </div>
+    <div class="pagination-box intro-x">
+      <el-pagination
+        hide-on-single-page
+        :page-size="20"
+        :pager-count="11"
+        layout="prev, pager, next"
+        :total="1000"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["ceateData1"],
+  computed: {
+    spanNum: function () {
+      return this.ceateData2.filter((item) => {
+        return item.laber === true;
+      }).length;
+    },
+    // 数据二次处理
+    ceateData: function () {
+      this.ceateData1.forEach((item, index) => {
+        if (index === 0) {
+          item.laber = true;
+        } else [(item.laber = false)];
+      });
+      return this.ceateData1;
+    },
+  },
+  data() {
+    return {
+      isList: 1,
+      ActiveIiem: 0,
+      laberText: "全选",
+      imgs2: require("../assets/images/mokuai2.png"),
+      imgs1: require("../assets/images/mokuai1.png"),
+      ceateData2: [
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+        {
+          title: "基础模块",
+          content: "移动端，小程序",
+          original: "1000",
+          preferential: "999",
+          laber: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    setIsList: function (i) {
+      this.ceateData.forEach((item, index) => {
+        if (i === index) {
+          item.laber = true;
+        } else {
+          item.laber = false;
+        }
+      });
+    },
+    getMokuaiDataLabel: function () {
+      // 全选
+      if (this.laberText === "全选") {
+        this.ceateData2.forEach((item) => {
+          return (item.laber = true);
+        });
+        this.laberText = "反选";
+      } else {
+        this.laberText = "全选";
+        this.ceateData2.forEach((item) => {
+          return (item.laber = false);
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.ActiveIiem {
+  background: #1890ff !important;
+  .rightTitle {
+    color: #fff !important;
+  }
+  .rightContent {
+    color: #74bcfe !important;
+  }
+
+  .yuanMoney {
+    color: #74bcfe !important;
+  }
+  .taoMoney {
+    color: #fff !important;
+  }
+}
+
+// ~~~
+
+.createAn2-header {
+  width: 100%;
+  text-align: center;
+  padding: 30px 0;
+  font-size: 18px;
+  color: #333333;
+  span {
+    display: inline-block;
+    padding-bottom: 4px;
+    position: relative;
+    cursor: pointer;
+  }
+  .span1 {
+    margin-right: 30px;
+  }
+  .spanActive {
+    color: #1890fe;
+  }
+
+  .spanActive::after {
+    content: "";
+    position: absolute;
+    height: 4px;
+    background: #1890ff;
+    border-radius: 2px;
+    bottom: 0;
+    width: 90%;
+    left: 5%;
+  }
+}
+
+.createAn2-title {
+  width: 77.6%;
+  overflow: hidden;
+  margin: auto;
+  .left {
+    float: left;
+    .div1 {
+      color: #333333;
+      font-size: 16px;
+    }
+    .div2 {
+      color: #999999;
+      font-size: 12px;
+    }
+  }
+  .right {
+    float: right;
+    .span1 {
+      font-size: 18px;
+      color: #333333;
+    }
+    .span2 {
+      margin-left: 5px;
+      background: #1890ff;
+      font-size: 14px;
+      color: #fff;
+      width: 68px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      display: inline-block;
+      border-radius: 15px;
+    }
+
+    .span2:active {
+      background: #2d97fa;
+    }
+  }
+}
+
+.createAn2-html {
+  width: calc(77.6% + 12px);
+  margin: 40px auto 0;
+}
+
+.createAn2-content {
+  width: calc(100% + 12px);
+  overflow: hidden;
+  margin: auto;
+
+  .item-box {
+    width: 194px;
+    height: 98px;
+    box-sizing: border-box;
+    background: #fcfcfd;
+    border: 1px solid #f4f4f7;
+    opacity: 1;
+    border-radius: 16px;
+    float: left;
+    margin: 0 12px 12px 0;
+    padding: 10px 12px;
+    cursor: pointer;
+  }
+
+  .mokuai-img {
+    width: 34px;
+    height: 34px;
+    float: left;
+    margin-right: 4px;
+  }
+  .mokuai-right {
+    float: left;
+    width: 77%;
+
+    .rightTitle {
+      color: #333333;
+      font-size: 14px;
+      height: 18px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .rightContent {
+      color: #999999;
+      font-size: 12px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .div-top {
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+
+  .yuanMoney {
+    font-size: 12px;
+    color: #999999;
+  }
+  .taoMoney {
+    color: #1890ff;
+    font-size: 12px;
+  }
+
+  .float-yuan {
+    width: 20px;
+    height: 20px;
+    background: #ffffff;
+    border-radius: 50%;
+    float: right;
+    margin-top: 15px;
+    text-align: center;
+    line-height: 20px;
+    color: #1890ff;
+    font-weight: bold;
+  }
+}
+
+.pagination-box {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

src/modules/createAn3.vue

@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <div class="createAn2-header intro-x">
+      <span
+        class="span1"
+        :class="{ spanActive: item.laber }"
+        @click="setIsList(index)"
+        v-for="(item, index) in ceateData"
+        :key="index"
+        >{{ item.title }}</span
+      >
+    </div>
+    <div class="createAn2-title intro-x">
+      <div class="left">
+        <div class="div1">全选享受套餐价 ¥ 12999</div>
+        <div class="div2">终端全选享受套餐价</div>
+      </div>
+      <div class="right">
+        <span class="span1" v-show="spanNum >= 1">已选{{ spanNum }}个</span>
+        <span class="span2" @click="getMokuaiDataLabel">{{ laberText }}</span>
+      </div>
+    </div>
+
+    <div class="createAn2-html">
+      <div class="createAn2-content intro-x">
+        <div
+          :class="{ ActiveIiem: item.laber }"
+          class="item-box"
+          v-for="(item, index) in ceateData3"
+          :key="index"
+          @click="item.laber = !item.laber"
+        >
+          <div class="div-top">
+            <img
+              class="mokuai-img"
+              :src="item.laber ?item.url2 : item.url1"
+              alt=""
+            />
+          </div>
+          <div style="float: left">
+            <div class="yuanMoney">{{ item.title }}</div>
+            <div class="taoMoney">套餐价¥ {{ item.preferential }}</div>
+          </div>
+          <div
+            class="float-yuan"
+            v-show="item.laber == true"
+            :class="{ 'el-icon-check': item.laber }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["ceateData1"],
+  computed: {
+    spanNum: function () {
+      return this.ceateData3.filter((item) => {
+        return item.laber === true;
+      }).length;
+    },
+    // 数据二次处理
+    ceateData: function () {
+      this.ceateData1.forEach((item, index) => {
+        if (index === 0) {
+          item.laber = true;
+        } else [(item.laber = false)];
+      });
+      return this.ceateData1;
+    },
+  },
+  data() {
+    return {
+      isList: 1,
+      laberText: "全选",
+      ceateData3: [
+        {
+          title: "安卓端",
+          url1: require("../assets/images/anzhuo1.png"),
+          url2: require("../assets/images/anzhuo2.png"),
+          laber: false,
+          preferential: 12999,
+        },
+        {
+          title: "IOS端",
+          url1: require("../assets/images/ios1.png"),
+          url2: require("../assets/images/ios2.png"),
+          laber: false,
+          preferential: 12999,
+        },
+        {
+          title: "WEB端",
+          url1: require("../assets/images/h51.png"),
+          url2: require("../assets/images/h52.png"),
+          laber: false,
+          preferential: 12999,
+        },
+        {
+          title: "小程序端",
+          url1: require("../assets/images/xiaochengxu1.png"),
+          url2: require("../assets/images/xiaochengxu2.png"),
+          laber: false,
+          preferential: 12999.12,
+        },
+      ],
+    };
+  },
+  methods: {
+    //   全选/反选
+    getMokuaiDataLabel: function () {
+      // 全选
+      if (this.laberText === "全选") {
+        this.ceateData3.forEach((item) => {
+          return (item.laber = true);
+        });
+        this.laberText = "反选";
+      } else {
+        this.laberText = "全选";
+        this.ceateData3.forEach((item) => {
+          return (item.laber = false);
+        });
+      }
+    },
+    setIsList: function (i) {
+      this.ceateData.forEach((item, index) => {
+        if (i === index) {
+          item.laber = true;
+        } else {
+          item.laber = false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.ActiveIiem {
+  background: #1890ff !important;
+  .rightTitle {
+    color: #fff !important;
+  }
+  .rightContent {
+    color: #74bcfe !important;
+  }
+
+  .yuanMoney {
+    color: #74bcfe !important;
+  }
+  .taoMoney {
+    color: #fff !important;
+  }
+}
+.createAn2-header {
+  width: 100%;
+  text-align: center;
+  padding: 30px 0;
+  font-size: 18px;
+  color: #333333;
+  span {
+    display: inline-block;
+    padding-bottom: 4px;
+    position: relative;
+    cursor: pointer;
+  }
+  .span1 {
+    margin-right: 30px;
+  }
+  .spanActive {
+    color: #1890fe;
+  }
+
+  .spanActive::after {
+    content: "";
+    position: absolute;
+    height: 4px;
+    background: #1890ff;
+    border-radius: 2px;
+    bottom: 0;
+    width: 90%;
+    left: 5%;
+  }
+}
+
+.createAn2-title {
+  width: 45.6%;
+  min-width: 812px;
+  overflow: hidden;
+  margin: auto;
+  .left {
+    float: left;
+    .div1 {
+      color: #333333;
+      font-size: 16px;
+    }
+    .div2 {
+      color: #999999;
+      font-size: 12px;
+    }
+  }
+  .right {
+    float: right;
+    .span1 {
+      font-size: 18px;
+      color: #333333;
+    }
+    .span2 {
+      margin-left: 5px;
+      background: #1890ff;
+      font-size: 14px;
+      color: #fff;
+      width: 68px;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      display: inline-block;
+      border-radius: 15px;
+    }
+
+    .span2:active {
+      background: #2d97fa;
+    }
+  }
+}
+
+.createAn2-html {
+  width: calc(45.6% + 12px);
+  margin: 40px auto 0;
+  min-width: 812px;
+}
+
+.createAn2-content {
+  width: calc(100% + 12px);
+  overflow: hidden;
+  margin: auto;
+
+  .item-box {
+    width: 194px;
+    height: 98px;
+    box-sizing: border-box;
+    background: #fcfcfd;
+    border: 1px solid #f4f4f7;
+    opacity: 1;
+    border-radius: 16px;
+    float: left;
+    margin: 0 12px 12px 0;
+    padding: 10px 12px;
+    cursor: pointer;
+  }
+
+  .mokuai-img {
+    width: 34px;
+    height: 34px;
+    float: left;
+    margin-right: 4px;
+  }
+  .mokuai-right {
+    float: left;
+    width: 77%;
+
+    .rightTitle {
+      color: #333333;
+      font-size: 14px;
+      height: 18px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .rightContent {
+      color: #999999;
+      font-size: 12px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .div-top {
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+
+  .yuanMoney {
+    font-size: 12px;
+    color: #999999;
+  }
+  .taoMoney {
+    color: #1890ff;
+    font-size: 12px;
+  }
+
+  .float-yuan {
+    width: 20px;
+    height: 20px;
+    background: #ffffff;
+    border-radius: 50%;
+    float: right;
+    margin-top: 15px;
+    text-align: center;
+    line-height: 20px;
+    color: #1890ff;
+    font-weight: bold;
+  }
+}
+</style>

src/modules/createAn4.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="createAn4-box">
+    <div class="laber-box intro-x">
+      <div
+        class="laberItem-box"
+        :class="{
+          isLaberTrue: payment == index,
+          available: index == 0 || index == 1,
+        }"
+        v-for="(item, index) in ceateData4"
+        :key="index"
+        @click="getPayment(index)"
+      >
+        <img class="itemLeftImg" :src="item.icon" alt="" />
+
+        <div class="laberContent">
+          <div class="item1">{{ item.title }}</div>
+          <div class="item2">{{ item.content }}</div>
+        </div>
+
+        <div
+          class="float-yuan"
+          :class="{ 'el-icon-check': payment === index }"
+          v-show="payment === index"
+        ></div>
+      </div>
+    </div>
+
+    <div class="table-box intro-x">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column label="账单明细" show-overflow-tooltip>
+          <!-- eslint-disable-next-line -->
+          <template slot-scope="scope">
+            <div class="scopeTitle">{{ scope.row.content }}</div>
+            <span class="scopeCotnent">{{
+              scope.$index == 0
+                ? "已选择功能模块"
+                : scope.$index == 1
+                ? "已选择插件"
+                : "已选择终端"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="right"
+          prop="num"
+          label="数量"
+          width="103"
+          show-overflow-tooltip
+        >
+          <!-- eslint-disable-next-line -->
+          <template slot-scope="scope">
+            <span>x{{ scope.row.num }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="right"
+          label="优惠"
+          width="100"
+          show-overflow-tooltip
+        >
+          <!-- eslint-disable-next-line -->
+          <template slot-scope="scope">
+            <span class="scopeDiscounts">{{ scope.row.discounts }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="right"
+          prop="money"
+          label="金额"
+          width="80"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="promotionCode-box intro-x">
+      <div class="promotionCode">
+        <span>优惠码</span>
+        <div class="el-Input">
+          <el-input placeholder="输入优惠码可在当前价格上再打折扣"></el-input>
+        </div>
+      </div>
+      <div class="promotionMoney" v-if="CodeMoney >= 1">
+        - ¥ {{ CodeMoney }}
+      </div>
+    </div>
+
+    <div class="totalMoney-box intro-x">
+      <div class="totalMoney-right">
+        <div class="div1">总计金额</div>
+        <!-- 使用 Vue filters过滤器  -->
+        <div class="div2">¥ {{ tatalMoneys | formatMoney }}</div> 
+        <!-- <div class="div3">共省 ¥6234</div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { formatMoney } from "../utils/formatMoney";
+export default {
+  props: ["ceateData1", "ceateData2", "ceateData3"],
+  filters: {
+    formatMoney: function (
+      number,
+      decimals = 2,
+      decPoint = ".",
+      thousandsSep = ","
+    ) {
+      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
+      let n = !isFinite(+number) ? 0 : +number;
+      let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
+      let sep = typeof thousandsSep === "undefined" ? "," : thousandsSep;
+      let dec = typeof decPoint === "undefined" ? "." : decPoint;
+      let s = "";
+      let toFixedFix = function (n, prec) {
+        let k = Math.pow(10, prec);
+        return "" + Math.ceil(n * k) / k;
+      };
+      s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".");
+      let re = /(-?\d+)(\d{3})/;
+      while (re.test(s[0])) {
+        s[0] = s[0].replace(re, "$1" + sep + "$2");
+      }
+      if ((s[1] || "").length < prec) {
+        s[1] = s[1] || "";
+        s[1] += new Array(prec - s[1].length + 1).join("0");
+      }
+ 
+      return s.join(dec);
+    },
+  },
+  computed: {
+    tableData: function () {
+      let arr = [];
+      let obj = {
+        content: [],
+        discounts: "享受打包价",
+        money: 0,
+      };
+ 
+      for (let i in this.ceateData1) {
+        obj.content.push(this.ceateData1[i].title);
+        obj.num = Number(i) + 1;
+        obj.money = obj.money + this.ceateData1[i].money;
+      }
+      obj.content = obj.content.join("、");
+      arr.push(obj);
+      obj = {
+        content: [],
+        discounts: "享受打包价",
+        money: 0,
+      };
+      for (let i in this.ceateData2) {
+        obj.content.push(this.ceateData2[i].content);
+        obj.num = Number(i) + 1;
+        obj.money = obj.money + Number(this.ceateData2[i].preferential);
+      }
+      obj.content = obj.content.join("、");
+      arr.push(obj);
+
+      obj = {
+        content: [],
+        discounts: "享受打包价",
+        money: 0,
+      };
+
+      for (let i in this.ceateData3) {
+        obj.content.push(this.ceateData3[i].title);
+        obj.num = Number(i) + 1;
+        obj.money = obj.money + Number(this.ceateData3[i].preferential);
+      }
+
+      obj.content = obj.content.join("、");
+      arr.push(obj);
+      return arr;
+    },
+    tatalMoneys: function () {
+      let money = 0;
+      for (let i in this.tableData) {
+        money = money + this.tableData[i].money;
+      }
+      return money;
+    },
+  },
+  data() {
+    return {
+      payment: 2,
+      CodeMoney: 0,
+      ceateData4: [
+        {
+          icon: require("../assets/images/xinyong.png"),
+          title: "授信模式",
+          content:
+            "每个认证账户可以免费获得一次授信开通机会，认证芝麻信用分可以享受先用后付的权利（每月将从盈利订单中扣除相应服务费，最多扣除14000元），可随时切换成付费模式。",
+          laber: true,
+        },
+        {
+          icon: require("../assets/images/zhifubao.png"),
+          title: "支付宝支付",
+          content:
+            "一次付费即可享用相应购买版本的所有内容，购买满足条件可享受打包价格，完善认证信息可享500元优惠券，可用于购买服务抵扣费用。",
+          laber: false,
+        },
+        {
+          icon: require("../assets/images/qianbao.png"),
+          title: "余额支付",
+          content:
+            "选择账号内所充值的金额来进行支付，支付前会检测当前账号余额是否充足。支付成功后会奖励500元优惠券，可以用购买服务抵扣费用。",
+          laber: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    getPayment: function (index) {
+      if (index === 0 || index === 1) {
+        this.$alert("授权模式暂未开放，请选择其他方式", "提示", {
+          confirmButtonText: "确定",
+          callback: (action) => {},
+        });
+        return;
+      }
+      this.payment = index;
+    },
+    created() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.createAn4-box {
+  margin-top: 30px;
+  padding: 0 116px;
+  .laber-box {
+    width: 100%;
+    overflow: hidden;
+    .laberItem-box {
+      float: left;
+      width: 32%;
+      min-width: 355px;
+      max-width: 430px;
+      height: 132px;
+      background: #fff;
+      padding: 20px;
+      box-sizing: border-box;
+      overflow: hidden;
+      border: 1px solid #eef2f7;
+      cursor: pointer;
+      border-radius: 22px;
+      margin: 0 2% 2% 0;
+    }
+    .laberItem-box:last-child {
+      margin: 0;
+    }
+  }
+  .itemLeftImg {
+    width: 48px;
+    height: 48px;
+    margin: 22px 20px 42px 0;
+    float: left;
+  }
+
+  .laberContent {
+    float: left;
+
+    width: 76%;
+    min-width: 250px;
+    .item1 {
+      color: #333333;
+      font-size: 14px;
+    }
+    .item2 {
+      font-size: 12px;
+      color: #999999;
+    }
+  }
+  .float-yuan {
+    width: 20px;
+    height: 20px;
+    background: #1890ff;
+    border-radius: 50%;
+    float: right;
+    margin-top: 38px;
+    text-align: center;
+    line-height: 20px;
+    color: #ffffff;
+    font-weight: bold;
+    box-shadow: #e2e2e2 0px 0px 2px;
+  }
+  .isLaberTrue {
+    border-color: #1890ff !important;
+  }
+}
+
+.available {
+  background: #f5f4f4 !important;
+  cursor: not-allowed !important;
+}
+
+.scopeTitle {
+  color: #333;
+  font-size: 14px;
+}
+
+.scopeCotnent {
+  color: #999999 !important;
+  font-size: 12px !important;
+}
+
+.scopeDiscounts {
+  color: #ff4242;
+}
+.promotionCode-box {
+  overflow: hidden;
+  margin-top: 13px;
+
+  .promotionCode {
+    float: left;
+    span {
+      display: inline-block;
+      height: 40px;
+      line-height: 40px;
+      margin-right: 10px;
+      color: #333333;
+      font-size: 14px;
+    }
+    .el-Input {
+      display: inline-block;
+      height: 40px;
+      width: 465px;
+    }
+  }
+  .promotionMoney {
+    float: right;
+    height: 40px;
+    line-height: 40px;
+    color: #ff4242;
+    font-size: 14px;
+  }
+}
+
+.totalMoney-box {
+  overflow: hidden;
+  .totalMoney-right {
+    float: right;
+    text-align: right;
+    .div1 {
+      font-size: 16px;
+      color: #728196;
+    }
+    .div2 {
+      color: #1890ff;
+      font-weight: bold;
+      font-size: 20px;
+      margin: 4px 0;
+    }
+    .div3 {
+      font-size: 14px;
+      color: #394251;
+    }
+  }
+}
+</style>

src/modules/createAn5.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <div class="wallet-box intro-x">
+      <img src="@/assets/images/qianbao.png" alt="" />
+      <div class="moneyDiv">
+        <div class="div1">余额支付</div>
+        <div class="div2">当前余额：¥ 12897497</div>
+      </div>
+    </div>
+    <div class="PhoneCode-box intro-x">
+      <div class="phone-box">
+        <span>验证手机号</span>
+        <div class="elInput">
+          <el-input
+            v-bind:value="phone | phoneFilter"
+            placeholder="输入验证码"
+            disabled
+          ></el-input>
+        </div>
+      </div>
+
+      <div class="code-box">
+        <span>输入验证码</span>
+        <div class="elInput">
+          <el-input v-model="code" placeholder="输入验证码"></el-input>
+        </div>
+        <div
+          class="code84"
+          @click="sendMobile"
+          :class="{ countClass: btnMsg === null }"
+        >
+          {{ btnMsg == null ? countNum + "秒后" : btnMsg }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import lodash from "lodash";
+
+export default {
+  filters: {
+    phoneFilter: function (phone) {
+ 
+      return String(phone).substring(0, 3) + '****' + String(phone).substring(7, 13);
+    },
+  },
+  data() {
+    return {
+      // 倒计时周期
+      countNum: 60,
+      // 用于倒计时标记，true-正在倒计时
+      countFlag: false,
+      // 定时器
+      intervalBtn: {},
+      btnMsg: "发送验证码",
+      phone: 13825663293,
+      code:'',
+    };
+  },
+  methods: {
+    // 倒计时
+    countDown() {
+      // 设置btn倒计时时显示的信息
+      this.btnMsg = null;
+      // 更改btn状态
+      this.countFlag = !this.countFlag;
+      // 设置倒计时
+      this.intervalBtn = setInterval(() => {
+        if (this.countNum <= 0) {
+          // 重置btn提示信息
+          this.btnMsg = "发送验证码";
+
+          // 清除定时器
+          clearInterval(this.intervalBtn);
+          // 更改btn状态
+          this.countFlag = !this.countFlag;
+          // 重置倒计时状态
+          this.countNum = 60;
+        }
+        // 倒计时
+        this.countNum--;
+      }, 1000);
+    },
+    // 获取验证码 --- > 防抖
+    sendMobile: lodash.debounce(function () {
+      if (this.btnMsg != "发送验证码") {
+        return;
+      }
+
+      //获取输入手机号码
+      let phone = this.phone;
+      //正则校验手机号是否合法
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
+        this.$message.error("手机号错误");
+        return;
+      }
+      this.countDown();
+
+      if (this.btnMsg === null) {
+        return;
+      }
+    }, 200),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.wallet-box {
+  width: 27.5%;
+  min-width: 282px;
+  height: 88px;
+  padding: 19px 30px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #1890ff;
+  border-radius: 22px;
+  margin: 50px auto 30px;
+  img {
+    width: 48px;
+    height: 48px;
+    float: left;
+  }
+  .moneyDiv {
+    float: left;
+    font-size: 14px;
+    margin-left: 20px;
+    height: 48px;
+    line-height: 24px;
+    .div1 {
+      color: #333333;
+    }
+    .div2 {
+      color: #999999;
+    }
+  }
+}
+
+.PhoneCode-box {
+  width: 27.5%;
+  min-width: 282px;
+  margin: auto;
+  .phone-box {
+    font-size: 14px;
+    color: #333333;
+    margin-bottom: 18px;
+    .elInput {
+      display: inline-block;
+      width: calc(100% - 70px - 3%);
+      margin-left: 3%;
+    }
+  }
+
+  .code-box {
+    font-size: 14px;
+    color: #333333;
+    .elInput {
+      display: inline-block;
+      width: calc(100% - 70px - 5% - 84px);
+      margin-left: 3%;
+    }
+    .code84 {
+      width: 84px;
+      height: 40px;
+      line-height: 40px;
+      background: #1890ff;
+      font-size: 12px;
+      text-align: center;
+      color: #fff;
+      border-radius: 12px;
+      display: inline-block;
+      margin-left: 2%;
+      cursor: pointer;
+    }
+    .code84:active {
+      background: #49a6fd;
+    }
+  }
+}
+
+.countClass {
+  background: #edf1f6 !important;
+  color: #788598 !important;
+  cursor: no-drop !important;
+}
+</style>

src/modules/createAn6.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="succeed-box intro-x" v-if="isSucceed">
+      <div class="succeed-png">
+        <img src="@/assets/images/succeeds.png" alt="" />
+      </div>
+
+      <div class="contentText">
+        <div style="font-size: 16px; color: #333333">支付成功</div>
+        <div style="font-size: 20px; color: #1890ff">¥ 15,000.00</div>
+        <div style="font-size: 12px; color: #999999">
+          支付成功，点击下面按钮继续进行应用创建的步骤吧！
+        </div>
+      </div>
+    </div>
+    <div class="error-box intro-x" v-else>
+      <div class="succeed-png">
+        <img src="@/assets/images/errors.png" alt="" />
+      </div>
+      <div class="contentText">
+        <div style="font-size: 16px; color: #333333">支付失败</div>
+        <div style="font-size: 20px; color: #ff4242">¥ 15,000.00</div>
+        <div style="font-size: 12px; color: #999999">
+          失败原因：账户余额不足
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['isSucceed'],
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.succeed-png,
+.error-png {
+  width: 125px;
+  height: 125px;
+  background: #f3f3fa;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 60px auto 5px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.contentText {
+  text-align: center;
+  line-height: 28px;
+}
+
+ 
+</style>

src/modules/createAn7.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="createAn7-html">
+    <div class="createAn7-box intro-x" v-for="(item, index) in createAn7" :key="index">
+      <div class="createAn7-item">
+        <div class="logoClass ">LOGO</div>
+        <div class="avatar-uploader-box">
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+          >
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </div>
+        <div class="appName">APP名称</div>
+
+        <div class="elInput">
+          <el-input v-model="item.name" placeholder="输入APP姓名"></el-input>
+        </div>
+      </div>
+      <div>{{ item.title }}端</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageUrl: null,
+      createAn7: [
+        {
+          title: "ios",
+          name: "",
+        },
+        {
+          title: "Android",
+          name: "",
+        },
+        {
+          title: "小程序",
+          name: "",
+        },
+        {
+          title: "WEB",
+          name: "",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.createAn7-html {
+  width: 100%;
+  text-align: center;
+  margin-top: 50px;
+}
+
+.createAn7-box {
+  display: inline-block;
+  margin-right: 20px;
+  font-size: 14px;
+  color: #333333;
+  margin-bottom: 20px;
+  .createAn7-item {
+    width: 194px;
+    height: 240px;
+    background: #ffffff;
+    border: 1px solid #eef2f7;
+    border-radius: 22px;
+    margin-bottom: 20px;
+    padding: 10px;
+  }
+  .createAn7-name {
+    font-size: 14px;
+    color: #333333;
+  }
+
+  .elInput {
+    width: 100%;
+  }
+}
+
+ 
+.logoClass {
+  text-align: left;
+  padding-left: 5px;
+}
+.appName {
+  text-align: left;
+  margin-bottom: 7px;
+}
+
+.avatar-uploader-box {
+  overflow: hidden;
+  .avatar-uploader {
+    width: 110px;
+    height: 110px;
+    background: #eef2f7;
+    float: left;
+    border-radius: 12px;
+    text-align: center;
+    line-height: 110px;
+    font-size: 10px;
+    margin: 12px 0 8px;
+  }
+}
+</style>

src/modules/createAn8.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="createAn7-box">
+    <div class="createAn7-title intro-x">正在创建应用</div>
+    <div class="createAn7-content intro-x">
+      稍等一会，创建成功后即可前往我的应用页面查看新创建的应用噢，进行更加详细的编辑
+    </div>
+    <div class="createAn7-icon ">
+      <LoadingIcon icon="oval" class="w-8 h-8 intro-x" v-if="loading8"  />
+
+      <i class="el-icon-success intro-x" style="color:#1890FF;font-size:73px" v-else></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["loading8"],
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.createAn7-box {
+  margin-top: 60px;
+  .createAn7-title {
+    font-size: 16px;
+    color: #333333;
+    text-align: center;
+  }
+  .createAn7-content {
+    font-size: 12px;
+    color: #999999;
+    width: 302px;
+    text-align: center;
+    margin: 8px auto 14px;
+  }
+  .createAn7-icon {
+    height: 73px;
+    width: 73px;
+    margin: auto;
+  }
+}
+</style>

src/modules/swiper.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="feature-box">
+    <div class="forClass" v-for="item in featureList" :key="item.title">
+      <div
+        class="feature-item"
+        style="height: 328px; width: 220px; padding: 28px 20px 40px"
+      >
+        <div class="feature-img intro-y">
+          <img :src="item.imgUrl" alt="" />
+        </div>
+        <div class="itemTile" style="font-size: 26px; margin: 19px 0px 21px">
+          {{ item.title }}
+        </div>
+        <div class="itemCotnent" style="font-size: 14px">
+          {{ item.content }}
+        </div>
+      </div>
+      <div v-for="(a_item, a_index) in item.data" :key="a_item.title">
+        <div
+          class="feature-item intro-x"
+          style="
+            height: 295.2px;
+            width: 198px;
+            top: 16px;
+            z-index: -1;
+            padding: 25px 18px 36px;
+          "
+          :style="a_index == '1' ? 'right:208px' : 'left:208px'"
+        >
+          <div class="feature-img">
+            <img :src="a_item.imgUrl" alt="" />
+          </div>
+          <div
+            class="itemTile"
+            style="font-size: 23.4px; margin: 12px 0px 20px"
+          >
+            {{ a_item.title }}
+          </div>
+          <div class="itemCotnent" style="font-size: 12.6px">
+            {{ a_item.content }}
+          </div>
+        </div>
+      </div>
+      <div v-for="(b_item, b_index) in item.data2" :key="b_item.title">
+        <div
+          class="feature-item intro-x"
+          style="
+            height: 262.4px;
+            width: 176px;
+            top: 33px;
+            z-index: -2;
+            padding: 22px 16px 31px;
+          "
+          :style="b_index == '1' ? 'right:397px' : 'left:397px'"
+        >
+          <div class="feature-img">
+            <img :src="b_item.imgUrl" alt="" />
+          </div>
+          <div
+            class="itemTile"
+            style="font-size: 20.8px; margin: 12px 0px 12px"
+          >
+            {{ b_item.title }}
+          </div>
+          <div class="itemCotnent" style="font-size: 11.2px">
+            {{ b_item.content }}
+          </div>
+        </div>
+      </div>
+      <div v-for="(c_item, c_index) in item.data3" :key="c_item.title">
+        <div
+          class="feature-item"
+          style="
+            height: 229.6px;
+            width: 154px;
+            top: 49px;
+            z-index: -3;
+            padding: 18px 14px 29px;
+          "
+          :style="c_index == '1' ? 'right:560px' : 'left:560px'"
+        >
+          <div class="feature-img">
+            <img :src="c_item.imgUrl" alt="" />
+          </div>
+          <div class="itemTile" style="font-size: 18.2px; margin: 9px 0px">
+            {{ c_item.title }}
+          </div>
+          <div class="itemCotnent" style="font-size: 9.8px">
+            {{ c_item.content }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      featureList: [
+        {
+          imgUrl: require("../assets/images/index/1-1.png"),
+          title: "社区团购",
+          content: "打通线下社区，布局社区经济，实现口碑传播",
+          data: [
+            {
+              imgUrl: require("../assets/images/index/2-2.png"),
+              title: "新人免单",
+              content: "创建免单活动，低价获客，迅速传播",
+            },
+            {
+              imgUrl: require("../assets/images/index/2-1.png"),
+              title: "会员唤醒",
+              content: "通过营销短信，唤醒沉睡粉丝，提高用户留存",
+            },
+          ],
+          data2: [
+            {
+              imgUrl: require("../assets/images/index/3-2.png"),
+              title: "早起打卡",
+              content: "每日打卡，赢取奖励，提高用户留存率",
+            },
+            {
+              imgUrl: require("../assets/images/index/3-1.png"),
+              title: "权益卡",
+              content: "星巴克，电影票等多种折扣权益免费享",
+            },
+          ],
+          data3: [
+            {
+              imgUrl: require("../assets/images/index/4-2.png"),
+              title: "达人说",
+              content: "KOL网红推荐，优质文章，教你买买买",
+            },
+            {
+              imgUrl: require("../assets/images/index/4-1.png"),
+              title: "区块链",
+              content: "行业独创粉丝券模式，促进粉丝裂变播",
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.feature-box {
+  padding: 40px 0;
+  height: 420px;
+  margin: auto;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  z-index: 1;
+  .forClass {
+    height: 328px;
+    width: 220px;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+  }
+  .feature-item {
+    background: #fff;
+    box-shadow: 0px 0px 20px 0px rgba(51, 51, 51, 0.3);
+    border-radius: 26px;
+    position: absolute;
+    box-sizing: border-box;
+    // text-align: center;
+    .feature-img {
+      width: 77.78%;
+      display: block;
+      margin: auto;
+    }
+  }
+  .itemTile {
+    font-weight: bold;
+    color: #333333;
+  }
+  .itemCotnent {
+    font-weight: 500;
+    color: #999999;
+    line-height: 21px;
+  }
+}
+</style>

src/router/index.js

@@ -6,8 +6,15 @@ import { apost } from '../utils/api/login'
 Vue.use(VueRouter);
 
 const routes = [
+
 	{
 		path: '/',
+		name: 'index',
+		meta: { title: '首页' },
+		component: () => import('@/views/index')
+	},
+	{
+		path: '/login',
 		name: 'login',
 		meta: { title: '用户登录' },
 		component: () => import('@/views/Login')
@@ -37,13 +44,13 @@ const routes = [
 			{
 				path: 'point-of-sale',
 				name: 'side-menu-point-of-sale',
-				meta: { title: '管理中心' },
+				meta: { title: '财务管理' },
 				component: () => import('@/views/PointOfSale')
 			},
 			{
 				path: 'chat',
 				name: 'side-menu-chat',
-				meta: { title: '管理中心' },
+				meta: { title: '消息中心' },
 				component: () => import('@/views/Chat')
 			},
 			{
@@ -329,7 +336,7 @@ const routes = [
 			{
 				path: 'invitation',
 				name: 'invitation',
-				meta: { title: '邀请赚钱' },
+				meta: { title: '推广赚钱' },
 				component: () => import('@/views/Invitation')
 			},
 			{
@@ -343,6 +350,12 @@ const routes = [
 				name: 'my-app',
 				meta: { title: '我的应用' },
 				component: () => import('@/views/MyApp')
+			},
+			{
+				path: 'myApp/CreateAn',
+				name: 'my-app',
+				meta: { title: ['我的应用', '创建应用'] },
+				component: () => import('@/views/CreateAn')
 			}
 		]
 	},
@@ -372,30 +385,40 @@ const routes = [
 ];
 
 const router = new VueRouter({
-	mode: 'history',
-	base: process.env.BASE_URL,
 	routes,
-	scrollBehavior(to, from, savedPosition) {
-		if (savedPosition) {
-			return savedPosition;
-		} else {
-			return { x: 0, y: 0 };
-		}
-	}
-});
+  })
+
+// const router = new VueRouter({
+// 	mode: 'hash',  //history
+// 	base: process.env.BASE_URL,
+// 	routes,
+// 	scrollBehavior(to, from, savedPosition) {
+// 		if (savedPosition) {
+// 			return savedPosition;
+// 		} else {
+// 			return { x: 0, y: 0 };
+// 		}
+// 	}
+// });
 
 router.beforeEach((to, from, next) => {
 	document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺'
-	if (to.path === '/') {
+	if (to.path != '/' && to.path != '/register' && to.path != '/isRegister') {
 		apost("/api/sign/status").then((res) => {
-			
-			next('/Dashboard')
 			// 用户登录未失效， 直接跳转到会员中心页面
-		}).catch(err=>{
-			return
+			if (to.path === '/') {
+				next('/Dashboard')
+			}
+
+		}).catch(err => {
+
+
+			next('/login')
 		})
+
 	}
 
+
 	next()
 })
 

src/store/side-menu.js

@@ -4,32 +4,38 @@ const state = () => {
       {
         icon: 'HomeIcon',
         pageName: 'side-menu-dashboard',
-        title: '会员中心'
+        title: '会员中心',
+        url:'/Dashboard'
       },
       {
         icon: 'BoxIcon',
         pageName: 'profile',
-        title: '个人资料'
+        title: '个人资料',
+        url:'/Dashboard/profile'
       },
       {
         icon: 'GridIcon',
         pageName: 'my-app',
-        title: '我的应用'
+        title: '我的应用',
+        url:'/Dashboard/myApp'
       },
       {
         icon: 'DollarSignIcon',
         pageName: 'side-menu-point-of-sale',
-        title: '财务管理'
+        title: '财务管理',
+        url:'/Dashboard/point-of-sale'
       },
       {
         icon: 'UsersIcon',
         pageName: 'invitation',
-        title: '推广赚钱'
+        title: '推广赚钱',
+        url:'/Dashboard/invitation'
       },
       {
         icon: 'MessageSquareIcon',
         pageName: 'side-menu-chat',
-        title: '消息中心'
+        title: '消息中心',
+        url:'/Dashboard/chat'
       }
     ]
   };

src/utils/api/login.js

@@ -1,6 +1,6 @@
 
 import request from '@/utils/request'
-import { url } from 'vuelidate/lib/validators'
+ 
 
 export function apost (url,data){
     return request({

src/utils/api/myapp.js

@@ -0,0 +1,20 @@
+
+import request from '@/utils/request'
+ 
+
+export function apost (url,data){
+    return request({
+        url: url,//自己的接口地址
+        method: 'post',//请求方法
+        data //需要携带的参数
+    })
+}
+
+
+export function aget(url){
+    return request({
+        url:url,
+        method:'get'
+    })
+}
+

src/utils/formatMoney.js

@@ -0,0 +1,30 @@
+/**
+ * @description 格式化金额
+ * @param number：要格式化的数字
+ * @param decimals：保留几位小数 默认0位
+ * @param decPoint：小数点符号 默认.
+ * @param thousandsSep：千分位符号 默认为,
+ */
+export const formatMoney = (number, decimals = 0, decPoint = '.', thousandsSep = ',') => {
+    number = (number + '').replace(/[^0-9+-Ee.]/g, '')
+    let n = !isFinite(+number) ? 0 : +number
+    let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
+    let sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
+    let dec = (typeof decPoint === 'undefined') ? '.' : decPoint
+    let s = ''
+    let toFixedFix = function (n, prec) {
+      let k = Math.pow(10, prec)
+      return '' + Math.ceil(n * k) / k
+    }
+    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
+    let re = /(-?\d+)(\d{3})/
+    while (re.test(s[0])) {
+      s[0] = s[0].replace(re, '$1' + sep + '$2')
+    }
+    if ((s[1] || '').length < prec) {
+      s[1] = s[1] || ''
+      s[1] += new Array(prec - s[1].length + 1).join('0')
+    }
+    console.log(123)
+    return s.join(dec)
+  }

src/utils/helper.js

@@ -102,6 +102,8 @@ export default {
         };
       },
       isset(obj) {
+
+ 
         if (obj !== null && obj !== undefined) {
           if (typeof obj === "object" || Array.isArray(obj)) {
             return Object.keys(obj).length;

src/views/App.vue

@@ -21,7 +21,6 @@
           <div class="pos-dropdown__dropdown-box dropdown-box">
             <div class="dropdown-box__content box p-2">
               <a
-                href=""
                 class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
@@ -30,7 +29,6 @@
                 >
               </a>
               <a
-                href=""
                 class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
@@ -39,7 +37,6 @@
                 >
               </a>
               <a
-                href=""
                 class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />

src/views/BlogLayout1.vue

@@ -17,13 +17,13 @@
           <div class="dropdown-box w-40">
             <div class="dropdown-box__content box p-2">
               <a
-                href=""
+                
                 class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <Share2Icon class="w-4 h-4 mr-2" /> Share Post
               </a>
               <a
-                href=""
+                
                 class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <DownloadIcon class="w-4 h-4 mr-2" /> Download Post
@@ -51,11 +51,11 @@
             />
           </div>
           <div class="ml-3 mr-auto">
-            <a href="" class="font-medium">{{ faker.users[0].name }}</a>
+            <a  class="font-medium">{{ faker.users[0].name }}</a>
             <div class="flex text-gray-600 truncate text-xs mt-1">
               <a
                 class="text-theme-1 inline-block truncate"
-                href=""
+                
                 >{{ faker.products[0].category }}</a
               >
               <span class="mx-1">•</span> {{ faker.formatted_times[0] }}
@@ -71,13 +71,13 @@
             <div class="dropdown-box w-40">
               <div class="dropdown-box__content box p-2">
                 <a
-                  href=""
+                  
                   class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <Edit2Icon class="w-4 h-4 mr-2" /> Edit Post
                 </a>
                 <a
-                  href=""
+                  
                   class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <TrashIcon class="w-4 h-4 mr-2" /> Delete Post
@@ -94,7 +94,7 @@
               :src="require(`@/assets/images/${faker.images[0]}`)"
             />
           </div>
-          <a href="" class="block font-medium text-base mt-5">{{
+          <a  class="block font-medium text-base mt-5">{{
             faker.news[0].title
           }}</a>
           <div class="text-gray-700 mt-2">
@@ -106,7 +106,7 @@
         >
           <Tippy
             tag="a"
-            href=""
+            
             class="intro-x w-8 h-8 flex items-center justify-center rounded-full border border-gray-500 text-gray-600 mr-2"
             content="Bookmark"
           >
@@ -143,7 +143,7 @@
           </div>
           <Tippy
             tag="a"
-            href=""
+            
             class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto"
             content="Share"
           >
@@ -151,7 +151,7 @@
           </Tippy>
           <Tippy
             tag="a"
-            href=""
+            
             class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-1 text-white ml-2"
             content="Download PDF"
           >
@@ -199,37 +199,37 @@
       >
         <ul class="pagination">
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronsLeftIcon class="w-4 h-4" />
             </a>
           </li>
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronLeftIcon class="w-4 h-4" />
             </a>
           </li>
           <li>
-            <a class="pagination__link" href="">...</a>
+            <a class="pagination__link" >...</a>
           </li>
           <li>
-            <a class="pagination__link" href="">1</a>
+            <a class="pagination__link" >1</a>
           </li>
           <li>
-            <a class="pagination__link pagination__link--active" href="">2</a>
+            <a class="pagination__link pagination__link--active" >2</a>
           </li>
           <li>
-            <a class="pagination__link" href="">3</a>
+            <a class="pagination__link" >3</a>
           </li>
           <li>
-            <a class="pagination__link" href="">...</a>
+            <a class="pagination__link" >...</a>
           </li>
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronRightIcon class="w-4 h-4" />
             </a>
           </li>
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronsRightIcon class="w-4 h-4" />
             </a>
           </li>

src/views/BlogLayout2.vue

@@ -17,13 +17,13 @@
           <div class="dropdown-box w-40">
             <div class="dropdown-box__content box p-2">
               <a
-                href=""
+                
                 class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <Share2Icon class="w-4 h-4 mr-2" /> Share Post
               </a>
               <a
-                href=""
+                
                 class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <DownloadIcon class="w-4 h-4 mr-2" /> Download Post
@@ -55,7 +55,7 @@
               />
             </div>
             <div class="ml-3 text-white mr-auto">
-              <a href="" class="font-medium">{{ faker.users[0].name }}</a>
+              <a  class="font-medium">{{ faker.users[0].name }}</a>
               <div class="text-xs">{{ faker.formatted_times[0] }}</div>
             </div>
             <div class="dropdown ml-3">
@@ -68,13 +68,13 @@
               <div class="dropdown-box w-40">
                 <div class="dropdown-box__content box p-2">
                   <a
-                    href=""
+                    
                     class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <Edit2Icon class="w-4 h-4 mr-2" /> Edit Post
                   </a>
                   <a
-                    href=""
+                    
                     class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <TrashIcon class="w-4 h-4 mr-2" /> Delete Post
@@ -87,7 +87,7 @@
             <span class="blog__category px-2 py-1 rounded">{{
               faker.products[0].category
             }}</span>
-            <a href="" class="block font-medium text-xl mt-3">{{
+            <a  class="block font-medium text-xl mt-3">{{
               faker.news[0].title
             }}</a>
           </div>
@@ -100,7 +100,7 @@
         >
           <Tippy
             tag="a"
-            href=""
+            
             class="intro-x w-8 h-8 flex items-center justify-center rounded-full border border-gray-500 text-gray-600 mr-2"
             content="Bookmark"
           >
@@ -137,7 +137,7 @@
           </div>
           <Tippy
             tag="a"
-            href=""
+            
             class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto"
             content="Share"
           >
@@ -145,7 +145,7 @@
           </Tippy>
           <Tippy
             tag="a"
-            href=""
+            
             class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-1 text-white ml-2"
             content="Download PDF"
           >
@@ -193,37 +193,37 @@
       >
         <ul class="pagination">
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronsLeftIcon class="w-4 h-4" />
             </a>
           </li>
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronLeftIcon class="w-4 h-4" />
             </a>
           </li>
           <li>
-            <a class="pagination__link" href="">...</a>
+            <a class="pagination__link" >...</a>
           </li>
           <li>
-            <a class="pagination__link" href="">1</a>
+            <a class="pagination__link" >1</a>
           </li>
           <li>
-            <a class="pagination__link pagination__link--active" href="">2</a>
+            <a class="pagination__link pagination__link--active" >2</a>
           </li>
           <li>
-            <a class="pagination__link" href="">3</a>
+            <a class="pagination__link" >3</a>
           </li>
           <li>
-            <a class="pagination__link" href="">...</a>
+            <a class="pagination__link" >...</a>
           </li>
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronRightIcon class="w-4 h-4" />
             </a>
           </li>
           <li>
-            <a class="pagination__link" href="">
+            <a class="pagination__link" >
               <ChevronsRightIcon class="w-4 h-4" />
             </a>
           </li>

src/views/BlogLayout3.vue

@@ -8,7 +8,7 @@
       class="intro-y text-gray-700 mt-3 text-xs sm:text-sm"
     >
       {{ $f()[0].dates[0] }} <span class="mx-1">•</span>
-      <a class="text-theme-1" href="">{{
+      <a class="text-theme-1" >{{
         $f()[0].products[0].category
       }}</a>
       <span class="mx-1">•</span> 7 Min read
@@ -25,7 +25,7 @@
     <div class="intro-y flex relative pt-16 sm:pt-6 items-center pb-6">
       <Tippy
         tag="a"
-        href=""
+        
         class="intro-x w-8 h-8 sm:w-10 sm:h-10 flex flex-none items-center justify-center rounded-full border border-gray-500 text-gray-600 mr-3"
         content="Bookmark"
       >
@@ -76,7 +76,7 @@
       </div>
       <Tippy
         tag="a"
-        href=""
+        
         class="intro-x w-8 h-8 sm:w-10 sm:h-10 flex flex-none items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto sm:ml-0"
         content="Share"
       >
@@ -84,7 +84,7 @@
       </Tippy>
       <Tippy
         tag="a"
-        href=""
+        
         class="intro-x w-8 h-8 sm:w-10 sm:h-10 flex flex-none items-center justify-center rounded-full bg-theme-1 text-white ml-3"
         content="Download PDF"
       >
@@ -108,7 +108,7 @@
           />
         </div>
         <div class="ml-3 mr-auto">
-          <a href="" class="font-medium">{{ $f()[0].users[0].name }}</a
+          <a  class="font-medium">{{ $f()[0].users[0].name }}</a
           >, Author
           <div class="text-gray-600">Senior Frontend Engineer</div>
         </div>
@@ -119,7 +119,7 @@
         Share this post:
         <Tippy
           tag="a"
-          href=""
+          
           class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
           content="Facebook"
         >
@@ -127,7 +127,7 @@
         </Tippy>
         <Tippy
           tag="a"
-          href=""
+          
           class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
           content="Twitter"
         >
@@ -135,7 +135,7 @@
         </Tippy>
         <Tippy
           tag="a"
-          href=""
+          
           class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
           content="Linked In"
         >
@@ -170,8 +170,8 @@
           </div>
           <div class="ml-3 flex-1">
             <div class="flex items-center">
-              <a href="" class="font-medium">{{ $f()[0].users[0].name }}</a>
-              <a href="" class="ml-auto text-xs text-gray-600">Reply</a>
+              <a  class="font-medium">{{ $f()[0].users[0].name }}</a>
+              <a  class="ml-auto text-xs text-gray-600">Reply</a>
             </div>
             <div class="text-gray-600 text-xs sm:text-sm">
               {{ $f()[0].formatted_times[0] }}
@@ -191,8 +191,8 @@
           </div>
           <div class="ml-3 flex-1">
             <div class="flex items-center">
-              <a href="" class="font-medium">{{ $f()[0].users[1].name }}</a>
-              <a href="" class="ml-auto text-xs text-gray-600">Reply</a>
+              <a  class="font-medium">{{ $f()[0].users[1].name }}</a>
+              <a  class="ml-auto text-xs text-gray-600">Reply</a>
             </div>
             <div class="text-gray-600 text-xs sm:text-sm">
               {{ $f()[1].formatted_times[0] }}

src/views/Button.vue

@@ -217,32 +217,32 @@
           <div id="link-button" class="p-5">
             <div class="preview">
               <a
-                href=""
+                
                 class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white"
                 >Link</a
               >
               <a
-                href=""
+                
                 class="button w-24 inline-block mr-1 mb-2 border text-gray-700"
                 >Button</a
               >
               <a
-                href=""
+                
                 class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white"
                 >Input</a
               >
               <a
-                href=""
+                
                 class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white"
                 >Submit</a
               >
               <a
-                href=""
+                
                 class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white"
                 >Reset</a
               >
               <a
-                href=""
+                
                 class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600"
                 >Metal</a
               >
@@ -261,32 +261,32 @@
                   >
                     <textarea>
                       <a
-                        href=""
+                        
                         class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white"
                         >Link</a
                       >
                       <a
-                        href=""
+                        
                         class="button w-24 inline-block mr-1 mb-2 border text-gray-700"
                         >Button</a
                       >
                       <a
-                        href=""
+                        
                         class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white"
                         >Input</a
                       >
                       <a
-                        href=""
+                        
                         class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white"
                         >Submit</a
                       >
                       <a
-                        href=""
+                        
                         class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white"
                         >Reset</a
                       >
                       <a
-                        href=""
+                        
                         class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600"
                         >Metal</a
                       >