Eddie
3 jaren geleden
100 gewijzigde bestanden met toevoegingen van 3720 en 478 verwijderingen
-
BIN
-
+212 -372package-lock.json
-
+4 -3package.json
-
BIN
-
+14 -0src/App.vue
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
+1011 -0src/assets/images/sapiens.svg
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
BIN
-
+126 -1src/assets/sass/_app.scss
-
+2 -2src/assets/sass/_login.scss
-
+8 -8src/assets/sass/app2.scss
-
+27 -2src/components/TopBar.vue
-
+1 -1src/components/global/LoadingIcon.vue
-
+1 -0src/layouts/SideMenu.vue
-
+260 -0src/modules/Crad2.vue
-
+58 -0src/modules/betaPop.vue
-
+112 -0src/modules/createAn1.vue
-
+453 -0src/modules/createAn2.vue
-
+307 -0src/modules/createAn3.vue
-
+365 -0src/modules/createAn4.vue
-
+186 -0src/modules/createAn5.vue
-
+61 -0src/modules/createAn6.vue
-
+111 -0src/modules/createAn7.vue
-
+45 -0src/modules/createAn8.vue
-
+189 -0src/modules/swiper.vue
-
+41 -18src/router/index.js
-
+12 -6src/store/side-menu.js
-
+1 -1src/utils/api/login.js
-
+20 -0src/utils/api/myapp.js
-
+30 -0src/utils/formatMoney.js
-
+2 -0src/utils/helper.js
-
+0 -3src/views/App.vue
-
+19 -19src/views/BlogLayout1.vue
-
+18 -18src/views/BlogLayout2.vue
-
+12 -12src/views/BlogLayout3.vue
-
+12 -12src/views/Button.vue
+ 212
- 372
package-lock.json
Diff onderdrukt omdat het te groot bestand
Bestand weergeven
+ 4
- 3
package.json
Bestand weergeven
| @@ -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" | |||
+ 14
- 0
src/App.vue
Bestand weergeven
| @@ -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> | |||
+ 1011
- 0
src/assets/images/sapiens.svg
Diff onderdrukt omdat het te groot bestand
Bestand weergeven
+ 126
- 1
src/assets/sass/_app.scss
Bestand weergeven
| @@ -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; | |||
| } | |||
+ 2
- 2
src/assets/sass/_login.scss
Bestand weergeven
| @@ -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) { | |||
+ 8
- 8
src/assets/sass/app2.scss
Bestand weergeven
| @@ -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'; | |||
+ 27
- 2
src/components/TopBar.vue
Bestand weergeven
| @@ -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; | |||
+ 1
- 1
src/components/global/LoadingIcon.vue
Bestand weergeven
| @@ -772,7 +772,7 @@ export default { | |||
| }, | |||
| color: { | |||
| type: String, | |||
| default: "#2d3748" | |||
| default: "#1890FF" | |||
| } | |||
| } | |||
| }; | |||
+ 1
- 0
src/layouts/SideMenu.vue
Bestand weergeven
| @@ -126,6 +126,7 @@ | |||
| <!-- BEGIN: Content --> | |||
| <div class="content"> | |||
| <TopBar /> | |||
| <router-view /> | |||
| </div> | |||
| <!-- END: Content --> | |||
+ 260
- 0
src/modules/Crad2.vue
Bestand weergeven
| @@ -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> | |||
+ 58
- 0
src/modules/betaPop.vue
Bestand weergeven
| @@ -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> | |||
+ 112
- 0
src/modules/createAn1.vue
Bestand weergeven
| @@ -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> | |||
+ 453
- 0
src/modules/createAn2.vue
Bestand weergeven
| @@ -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> | |||
+ 307
- 0
src/modules/createAn3.vue
Bestand weergeven
| @@ -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> | |||
+ 365
- 0
src/modules/createAn4.vue
Bestand weergeven
| @@ -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> | |||
+ 186
- 0
src/modules/createAn5.vue
Bestand weergeven
| @@ -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> | |||
+ 61
- 0
src/modules/createAn6.vue
Bestand weergeven
| @@ -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> | |||
+ 111
- 0
src/modules/createAn7.vue
Bestand weergeven
| @@ -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> | |||
+ 45
- 0
src/modules/createAn8.vue
Bestand weergeven
| @@ -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> | |||
+ 189
- 0
src/modules/swiper.vue
Bestand weergeven
| @@ -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> | |||
+ 41
- 18
src/router/index.js
Bestand weergeven
| @@ -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() | |||
| }) | |||
+ 12
- 6
src/store/side-menu.js
Bestand weergeven
| @@ -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' | |||
| } | |||
| ] | |||
| }; | |||
+ 1
- 1
src/utils/api/login.js
Bestand weergeven
| @@ -1,6 +1,6 @@ | |||
| import request from '@/utils/request' | |||
| import { url } from 'vuelidate/lib/validators' | |||
| export function apost (url,data){ | |||
| return request({ | |||
+ 20
- 0
src/utils/api/myapp.js
Bestand weergeven
| @@ -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' | |||
| }) | |||
| } | |||
+ 30
- 0
src/utils/formatMoney.js
Bestand weergeven
| @@ -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) | |||
| } | |||
+ 2
- 0
src/utils/helper.js
Bestand weergeven
| @@ -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; | |||
+ 0
- 3
src/views/App.vue
Bestand weergeven
| @@ -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" /> | |||
+ 19
- 19
src/views/BlogLayout1.vue
Bestand weergeven
| @@ -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> | |||
+ 18
- 18
src/views/BlogLayout2.vue
Bestand weergeven
| @@ -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> | |||
+ 12
- 12
src/views/BlogLayout3.vue
Bestand weergeven
| @@ -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] }} | |||
+ 12
- 12
src/views/Button.vue
Bestand weergeven
| @@ -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 | |||
| > | |||