Eddie
3 years ago
100 changed files with 3720 additions and 478 deletions
Unified View
Diff Options
-
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
BIN
View File
+ 212
- 372
package-lock.json
File diff suppressed because it is too large
View File
+ 4
- 3
package.json
View File
| @@ -1,6 +1,6 @@ | |||||
| { | { | ||||
| "name": "zyos-admin", | |||||
| "version": "0.1.0", | |||||
| "name": "zyosAdmin", | |||||
| "version": "0.0.1", | |||||
| "private": true, | "private": true, | ||||
| "scripts": { | "scripts": { | ||||
| "serve": "vue-cli-service serve", | "serve": "vue-cli-service serve", | ||||
| @@ -37,6 +37,7 @@ | |||||
| "js-cookie": "^2.2.1", | "js-cookie": "^2.2.1", | ||||
| "litepicker": "^1.5.7", | "litepicker": "^1.5.7", | ||||
| "lodash": "^4.17.20", | "lodash": "^4.17.20", | ||||
| "node-sass": "^4.14.1", | |||||
| "postcss-loader": "3", | "postcss-loader": "3", | ||||
| "raw-loader": "0.5.1", | "raw-loader": "0.5.1", | ||||
| "sass-loader": "^9.0.2", | "sass-loader": "^9.0.2", | ||||
| @@ -48,6 +49,7 @@ | |||||
| "vue-chartjs": "^3.5.1", | "vue-chartjs": "^3.5.1", | ||||
| "vue-feather-icons": "^5.1.0", | "vue-feather-icons": "^5.1.0", | ||||
| "vue-router": "^3.4.9", | "vue-router": "^3.4.9", | ||||
| "vue-seamless-scroll": "^1.1.23", | |||||
| "vue-slick-carousel": "^1.0.6", | "vue-slick-carousel": "^1.0.6", | ||||
| "vue-tippy": "^4.7.2", | "vue-tippy": "^4.7.2", | ||||
| "vue2-dropzone": "^3.6.0", | "vue2-dropzone": "^3.6.0", | ||||
| @@ -67,7 +69,6 @@ | |||||
| "eslint": "^7.14.0", | "eslint": "^7.14.0", | ||||
| "eslint-plugin-prettier": "^3.2.0", | "eslint-plugin-prettier": "^3.2.0", | ||||
| "eslint-plugin-vue": "^7.2.0", | "eslint-plugin-vue": "^7.2.0", | ||||
| "node-sass": "^4.12.0", | |||||
| "prettier": "^2.2.1", | "prettier": "^2.2.1", | ||||
| "tailwindcss": "^1.5.1", | "tailwindcss": "^1.5.1", | ||||
| "vue-template-compiler": "^2.6.12" | "vue-template-compiler": "^2.6.12" | ||||
BIN
View File
+ 14
- 0
src/App.vue
View File
| @@ -1,10 +1,24 @@ | |||||
| <template> | <template> | ||||
| <div id="app"> | <div id="app"> | ||||
| <router-view /> | <router-view /> | ||||
| <!-- <betaPop /> --> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | |||||
| import betaPop from './modules/betaPop' | |||||
| export default { | |||||
| } | |||||
| </script> | |||||
| <style scoped> | <style scoped> | ||||
| #app { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| </style> | </style> | ||||
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
+ 1011
- 0
src/assets/images/sapiens.svg
File diff suppressed because it is too large
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
BIN
View File
+ 126
- 1
src/assets/sass/_app.scss
View File
| @@ -4,6 +4,131 @@ | |||||
| @apply py-5; | @apply py-5; | ||||
| } | } | ||||
| ::-webkit-scrollbar { | |||||
| display: none; | |||||
| } | |||||
| .CursorPointer { | .CursorPointer { | ||||
| cursor: pointer; | 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
View File
| @@ -6,11 +6,11 @@ | |||||
| background-attachment: fixed; | background-attachment: fixed; | ||||
| } | } | ||||
| &:before { | &:before { | ||||
| margin-left: -46%; | |||||
| content: ""; | content: ""; | ||||
| margin-left: -48%; | |||||
| background-image: url(../images/bg-login-page.svg); | background-image: url(../images/bg-login-page.svg); | ||||
| background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
| background-size: auto 100%; | |||||
| // background-size: 100%; | |||||
| background-position: right; | background-position: right; | ||||
| @apply w-full h-full absolute top-0 left-0; | @apply w-full h-full absolute top-0 left-0; | ||||
| @media (max-width: $xl) { | @media (max-width: $xl) { | ||||
+ 8
- 8
src/assets/sass/app2.scss
View File
| @@ -2,14 +2,14 @@ | |||||
| @import 'breakpoint'; | @import 'breakpoint'; | ||||
| // // 3rd Parties | // // 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 | // Animations | ||||
| // @import 'typing-dots'; | // @import 'typing-dots'; | ||||
+ 27
- 2
src/components/TopBar.vue
View File
| @@ -16,7 +16,13 @@ | |||||
| > | > | ||||
| <div>智莺生活</div> | <div>智莺生活</div> | ||||
| <ChevronRightIcon class="breadcrumb__icon" /> | <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> | </div> | ||||
| <!-- END: Notifications --> | <!-- 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" | 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" /> | <ToggleRightIcon class="w-4 h-4 mr-2" /> | ||||
| 退出登陆 | |||||
| 退出登录 | |||||
| </span> | </span> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -221,6 +227,25 @@ export default { | |||||
| isUserNmae: true, // 控制显示 | 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: { | methods: { | ||||
| showSearchDropdown() { | showSearchDropdown() { | ||||
| this.searchDropdown = true; | this.searchDropdown = true; | ||||
+ 1
- 1
src/components/global/LoadingIcon.vue
View File
| @@ -772,7 +772,7 @@ export default { | |||||
| }, | }, | ||||
| color: { | color: { | ||||
| type: String, | type: String, | ||||
| default: "#2d3748" | |||||
| default: "#1890FF" | |||||
| } | } | ||||
| } | } | ||||
| }; | }; | ||||
+ 1
- 0
src/layouts/SideMenu.vue
View File
| @@ -126,6 +126,7 @@ | |||||
| <!-- BEGIN: Content --> | <!-- BEGIN: Content --> | ||||
| <div class="content"> | <div class="content"> | ||||
| <TopBar /> | <TopBar /> | ||||
| <router-view /> | <router-view /> | ||||
| </div> | </div> | ||||
| <!-- END: Content --> | <!-- END: Content --> | ||||
+ 260
- 0
src/modules/Crad2.vue
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -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
View File
| @@ -6,8 +6,15 @@ import { apost } from '../utils/api/login' | |||||
| Vue.use(VueRouter); | Vue.use(VueRouter); | ||||
| const routes = [ | const routes = [ | ||||
| { | { | ||||
| path: '/', | path: '/', | ||||
| name: 'index', | |||||
| meta: { title: '首页' }, | |||||
| component: () => import('@/views/index') | |||||
| }, | |||||
| { | |||||
| path: '/login', | |||||
| name: 'login', | name: 'login', | ||||
| meta: { title: '用户登录' }, | meta: { title: '用户登录' }, | ||||
| component: () => import('@/views/Login') | component: () => import('@/views/Login') | ||||
| @@ -37,13 +44,13 @@ const routes = [ | |||||
| { | { | ||||
| path: 'point-of-sale', | path: 'point-of-sale', | ||||
| name: 'side-menu-point-of-sale', | name: 'side-menu-point-of-sale', | ||||
| meta: { title: '管理中心' }, | |||||
| meta: { title: '财务管理' }, | |||||
| component: () => import('@/views/PointOfSale') | component: () => import('@/views/PointOfSale') | ||||
| }, | }, | ||||
| { | { | ||||
| path: 'chat', | path: 'chat', | ||||
| name: 'side-menu-chat', | name: 'side-menu-chat', | ||||
| meta: { title: '管理中心' }, | |||||
| meta: { title: '消息中心' }, | |||||
| component: () => import('@/views/Chat') | component: () => import('@/views/Chat') | ||||
| }, | }, | ||||
| { | { | ||||
| @@ -329,7 +336,7 @@ const routes = [ | |||||
| { | { | ||||
| path: 'invitation', | path: 'invitation', | ||||
| name: 'invitation', | name: 'invitation', | ||||
| meta: { title: '邀请赚钱' }, | |||||
| meta: { title: '推广赚钱' }, | |||||
| component: () => import('@/views/Invitation') | component: () => import('@/views/Invitation') | ||||
| }, | }, | ||||
| { | { | ||||
| @@ -343,6 +350,12 @@ const routes = [ | |||||
| name: 'my-app', | name: 'my-app', | ||||
| meta: { title: '我的应用' }, | meta: { title: '我的应用' }, | ||||
| component: () => import('@/views/MyApp') | 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({ | const router = new VueRouter({ | ||||
| mode: 'history', | |||||
| base: process.env.BASE_URL, | |||||
| routes, | 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) => { | router.beforeEach((to, from, next) => { | ||||
| document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺' | 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) => { | apost("/api/sign/status").then((res) => { | ||||
| next('/Dashboard') | |||||
| // 用户登录未失效， 直接跳转到会员中心页面 | // 用户登录未失效， 直接跳转到会员中心页面 | ||||
| }).catch(err=>{ | |||||
| return | |||||
| if (to.path === '/') { | |||||
| next('/Dashboard') | |||||
| } | |||||
| }).catch(err => { | |||||
| next('/login') | |||||
| }) | }) | ||||
| } | } | ||||
| next() | next() | ||||
| }) | }) | ||||
+ 12
- 6
src/store/side-menu.js
View File
| @@ -4,32 +4,38 @@ const state = () => { | |||||
| { | { | ||||
| icon: 'HomeIcon', | icon: 'HomeIcon', | ||||
| pageName: 'side-menu-dashboard', | pageName: 'side-menu-dashboard', | ||||
| title: '会员中心' | |||||
| title: '会员中心', | |||||
| url:'/Dashboard' | |||||
| }, | }, | ||||
| { | { | ||||
| icon: 'BoxIcon', | icon: 'BoxIcon', | ||||
| pageName: 'profile', | pageName: 'profile', | ||||
| title: '个人资料' | |||||
| title: '个人资料', | |||||
| url:'/Dashboard/profile' | |||||
| }, | }, | ||||
| { | { | ||||
| icon: 'GridIcon', | icon: 'GridIcon', | ||||
| pageName: 'my-app', | pageName: 'my-app', | ||||
| title: '我的应用' | |||||
| title: '我的应用', | |||||
| url:'/Dashboard/myApp' | |||||
| }, | }, | ||||
| { | { | ||||
| icon: 'DollarSignIcon', | icon: 'DollarSignIcon', | ||||
| pageName: 'side-menu-point-of-sale', | pageName: 'side-menu-point-of-sale', | ||||
| title: '财务管理' | |||||
| title: '财务管理', | |||||
| url:'/Dashboard/point-of-sale' | |||||
| }, | }, | ||||
| { | { | ||||
| icon: 'UsersIcon', | icon: 'UsersIcon', | ||||
| pageName: 'invitation', | pageName: 'invitation', | ||||
| title: '推广赚钱' | |||||
| title: '推广赚钱', | |||||
| url:'/Dashboard/invitation' | |||||
| }, | }, | ||||
| { | { | ||||
| icon: 'MessageSquareIcon', | icon: 'MessageSquareIcon', | ||||
| pageName: 'side-menu-chat', | pageName: 'side-menu-chat', | ||||
| title: '消息中心' | |||||
| title: '消息中心', | |||||
| url:'/Dashboard/chat' | |||||
| } | } | ||||
| ] | ] | ||||
| }; | }; | ||||
+ 1
- 1
src/utils/api/login.js
View File
| @@ -1,6 +1,6 @@ | |||||
| import request from '@/utils/request' | import request from '@/utils/request' | ||||
| import { url } from 'vuelidate/lib/validators' | |||||
| export function apost (url,data){ | export function apost (url,data){ | ||||
| return request({ | return request({ | ||||
+ 20
- 0
src/utils/api/myapp.js
View File
| @@ -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
View File
| @@ -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
View File
| @@ -102,6 +102,8 @@ export default { | |||||
| }; | }; | ||||
| }, | }, | ||||
| isset(obj) { | isset(obj) { | ||||
| if (obj !== null && obj !== undefined) { | if (obj !== null && obj !== undefined) { | ||||
| if (typeof obj === "object" || Array.isArray(obj)) { | if (typeof obj === "object" || Array.isArray(obj)) { | ||||
| return Object.keys(obj).length; | return Object.keys(obj).length; | ||||
+ 0
- 3
src/views/App.vue
View File
| @@ -21,7 +21,6 @@ | |||||
| <div class="pos-dropdown__dropdown-box dropdown-box"> | <div class="pos-dropdown__dropdown-box dropdown-box"> | ||||
| <div class="dropdown-box__content box p-2"> | <div class="dropdown-box__content box p-2"> | ||||
| <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" | 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" /> | <ActivityIcon class="w-4 h-4 mr-2" /> | ||||
| @@ -30,7 +29,6 @@ | |||||
| > | > | ||||
| </a> | </a> | ||||
| <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" | 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" /> | <ActivityIcon class="w-4 h-4 mr-2" /> | ||||
| @@ -39,7 +37,6 @@ | |||||
| > | > | ||||
| </a> | </a> | ||||
| <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" | 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" /> | <ActivityIcon class="w-4 h-4 mr-2" /> | ||||
+ 19
- 19
src/views/BlogLayout1.vue
View File
| @@ -17,13 +17,13 @@ | |||||
| <div class="dropdown-box w-40"> | <div class="dropdown-box w-40"> | ||||
| <div class="dropdown-box__content box p-2"> | <div class="dropdown-box__content box p-2"> | ||||
| <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" | 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 | <Share2Icon class="w-4 h-4 mr-2" /> Share Post | ||||
| </a> | </a> | ||||
| <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" | 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 | <DownloadIcon class="w-4 h-4 mr-2" /> Download Post | ||||
| @@ -51,11 +51,11 @@ | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| <div class="ml-3 mr-auto"> | <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"> | <div class="flex text-gray-600 truncate text-xs mt-1"> | ||||
| <a | <a | ||||
| class="text-theme-1 inline-block truncate" | class="text-theme-1 inline-block truncate" | ||||
| href="" | |||||
| >{{ faker.products[0].category }}</a | >{{ faker.products[0].category }}</a | ||||
| > | > | ||||
| <span class="mx-1">•</span> {{ faker.formatted_times[0] }} | <span class="mx-1">•</span> {{ faker.formatted_times[0] }} | ||||
| @@ -71,13 +71,13 @@ | |||||
| <div class="dropdown-box w-40"> | <div class="dropdown-box w-40"> | ||||
| <div class="dropdown-box__content box p-2"> | <div class="dropdown-box__content box p-2"> | ||||
| <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" | 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 | <Edit2Icon class="w-4 h-4 mr-2" /> Edit Post | ||||
| </a> | </a> | ||||
| <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" | 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 | <TrashIcon class="w-4 h-4 mr-2" /> Delete Post | ||||
| @@ -94,7 +94,7 @@ | |||||
| :src="require(`@/assets/images/${faker.images[0]}`)" | :src="require(`@/assets/images/${faker.images[0]}`)" | ||||
| /> | /> | ||||
| </div> | </div> | ||||
| <a href="" class="block font-medium text-base mt-5">{{ | |||||
| <a class="block font-medium text-base mt-5">{{ | |||||
| faker.news[0].title | faker.news[0].title | ||||
| }}</a> | }}</a> | ||||
| <div class="text-gray-700 mt-2"> | <div class="text-gray-700 mt-2"> | ||||
| @@ -106,7 +106,7 @@ | |||||
| > | > | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Bookmark" | ||||
| > | > | ||||
| @@ -143,7 +143,7 @@ | |||||
| </div> | </div> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto" | ||||
| content="Share" | content="Share" | ||||
| > | > | ||||
| @@ -151,7 +151,7 @@ | |||||
| </Tippy> | </Tippy> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | tag="a" | ||||
| href="" | |||||
| class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-1 text-white ml-2" | class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-1 text-white ml-2" | ||||
| content="Download PDF" | content="Download PDF" | ||||
| > | > | ||||
| @@ -199,37 +199,37 @@ | |||||
| > | > | ||||
| <ul class="pagination"> | <ul class="pagination"> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronsLeftIcon class="w-4 h-4" /> | <ChevronsLeftIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronLeftIcon class="w-4 h-4" /> | <ChevronLeftIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">...</a> | |||||
| <a class="pagination__link" >...</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">1</a> | |||||
| <a class="pagination__link" >1</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link pagination__link--active" href="">2</a> | |||||
| <a class="pagination__link pagination__link--active" >2</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">3</a> | |||||
| <a class="pagination__link" >3</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">...</a> | |||||
| <a class="pagination__link" >...</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronRightIcon class="w-4 h-4" /> | <ChevronRightIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronsRightIcon class="w-4 h-4" /> | <ChevronsRightIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
+ 18
- 18
src/views/BlogLayout2.vue
View File
| @@ -17,13 +17,13 @@ | |||||
| <div class="dropdown-box w-40"> | <div class="dropdown-box w-40"> | ||||
| <div class="dropdown-box__content box p-2"> | <div class="dropdown-box__content box p-2"> | ||||
| <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" | 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 | <Share2Icon class="w-4 h-4 mr-2" /> Share Post | ||||
| </a> | </a> | ||||
| <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" | 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 | <DownloadIcon class="w-4 h-4 mr-2" /> Download Post | ||||
| @@ -55,7 +55,7 @@ | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| <div class="ml-3 text-white mr-auto"> | <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 class="text-xs">{{ faker.formatted_times[0] }}</div> | ||||
| </div> | </div> | ||||
| <div class="dropdown ml-3"> | <div class="dropdown ml-3"> | ||||
| @@ -68,13 +68,13 @@ | |||||
| <div class="dropdown-box w-40"> | <div class="dropdown-box w-40"> | ||||
| <div class="dropdown-box__content box p-2"> | <div class="dropdown-box__content box p-2"> | ||||
| <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" | 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 | <Edit2Icon class="w-4 h-4 mr-2" /> Edit Post | ||||
| </a> | </a> | ||||
| <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" | 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 | <TrashIcon class="w-4 h-4 mr-2" /> Delete Post | ||||
| @@ -87,7 +87,7 @@ | |||||
| <span class="blog__category px-2 py-1 rounded">{{ | <span class="blog__category px-2 py-1 rounded">{{ | ||||
| faker.products[0].category | faker.products[0].category | ||||
| }}</span> | }}</span> | ||||
| <a href="" class="block font-medium text-xl mt-3">{{ | |||||
| <a class="block font-medium text-xl mt-3">{{ | |||||
| faker.news[0].title | faker.news[0].title | ||||
| }}</a> | }}</a> | ||||
| </div> | </div> | ||||
| @@ -100,7 +100,7 @@ | |||||
| > | > | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Bookmark" | ||||
| > | > | ||||
| @@ -137,7 +137,7 @@ | |||||
| </div> | </div> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto" | ||||
| content="Share" | content="Share" | ||||
| > | > | ||||
| @@ -145,7 +145,7 @@ | |||||
| </Tippy> | </Tippy> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | tag="a" | ||||
| href="" | |||||
| class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-1 text-white ml-2" | class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-1 text-white ml-2" | ||||
| content="Download PDF" | content="Download PDF" | ||||
| > | > | ||||
| @@ -193,37 +193,37 @@ | |||||
| > | > | ||||
| <ul class="pagination"> | <ul class="pagination"> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronsLeftIcon class="w-4 h-4" /> | <ChevronsLeftIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronLeftIcon class="w-4 h-4" /> | <ChevronLeftIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">...</a> | |||||
| <a class="pagination__link" >...</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">1</a> | |||||
| <a class="pagination__link" >1</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link pagination__link--active" href="">2</a> | |||||
| <a class="pagination__link pagination__link--active" >2</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">3</a> | |||||
| <a class="pagination__link" >3</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href="">...</a> | |||||
| <a class="pagination__link" >...</a> | |||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronRightIcon class="w-4 h-4" /> | <ChevronRightIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
| <li> | <li> | ||||
| <a class="pagination__link" href=""> | |||||
| <a class="pagination__link" > | |||||
| <ChevronsRightIcon class="w-4 h-4" /> | <ChevronsRightIcon class="w-4 h-4" /> | ||||
| </a> | </a> | ||||
| </li> | </li> | ||||
+ 12
- 12
src/views/BlogLayout3.vue
View File
| @@ -8,7 +8,7 @@ | |||||
| class="intro-y text-gray-700 mt-3 text-xs sm:text-sm" | class="intro-y text-gray-700 mt-3 text-xs sm:text-sm" | ||||
| > | > | ||||
| {{ $f()[0].dates[0] }} <span class="mx-1">•</span> | {{ $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 | $f()[0].products[0].category | ||||
| }}</a> | }}</a> | ||||
| <span class="mx-1">•</span> 7 Min read | <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"> | <div class="intro-y flex relative pt-16 sm:pt-6 items-center pb-6"> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Bookmark" | ||||
| > | > | ||||
| @@ -76,7 +76,7 @@ | |||||
| </div> | </div> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Share" | ||||
| > | > | ||||
| @@ -84,7 +84,7 @@ | |||||
| </Tippy> | </Tippy> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Download PDF" | ||||
| > | > | ||||
| @@ -108,7 +108,7 @@ | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| <div class="ml-3 mr-auto"> | <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 | >, Author | ||||
| <div class="text-gray-600">Senior Frontend Engineer</div> | <div class="text-gray-600">Senior Frontend Engineer</div> | ||||
| </div> | </div> | ||||
| @@ -119,7 +119,7 @@ | |||||
| Share this post: | Share this post: | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Facebook" | ||||
| > | > | ||||
| @@ -127,7 +127,7 @@ | |||||
| </Tippy> | </Tippy> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Twitter" | ||||
| > | > | ||||
| @@ -135,7 +135,7 @@ | |||||
| </Tippy> | </Tippy> | ||||
| <Tippy | <Tippy | ||||
| tag="a" | 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" | 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" | content="Linked In" | ||||
| > | > | ||||
| @@ -170,8 +170,8 @@ | |||||
| </div> | </div> | ||||
| <div class="ml-3 flex-1"> | <div class="ml-3 flex-1"> | ||||
| <div class="flex items-center"> | <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> | ||||
| <div class="text-gray-600 text-xs sm:text-sm"> | <div class="text-gray-600 text-xs sm:text-sm"> | ||||
| {{ $f()[0].formatted_times[0] }} | {{ $f()[0].formatted_times[0] }} | ||||
| @@ -191,8 +191,8 @@ | |||||
| </div> | </div> | ||||
| <div class="ml-3 flex-1"> | <div class="ml-3 flex-1"> | ||||
| <div class="flex items-center"> | <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> | ||||
| <div class="text-gray-600 text-xs sm:text-sm"> | <div class="text-gray-600 text-xs sm:text-sm"> | ||||
| {{ $f()[1].formatted_times[0] }} | {{ $f()[1].formatted_times[0] }} | ||||
+ 12
- 12
src/views/Button.vue
View File
| @@ -217,32 +217,32 @@ | |||||
| <div id="link-button" class="p-5"> | <div id="link-button" class="p-5"> | ||||
| <div class="preview"> | <div class="preview"> | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white" | ||||
| >Link</a | >Link</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 border text-gray-700" | class="button w-24 inline-block mr-1 mb-2 border text-gray-700" | ||||
| >Button</a | >Button</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white" | ||||
| >Input</a | >Input</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white" | ||||
| >Submit</a | >Submit</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white" | ||||
| >Reset</a | >Reset</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600" | class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600" | ||||
| >Metal</a | >Metal</a | ||||
| > | > | ||||
| @@ -261,32 +261,32 @@ | |||||
| > | > | ||||
| <textarea> | <textarea> | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white" | ||||
| >Link</a | >Link</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 border text-gray-700" | class="button w-24 inline-block mr-1 mb-2 border text-gray-700" | ||||
| >Button</a | >Button</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white" | ||||
| >Input</a | >Input</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white" | ||||
| >Submit</a | >Submit</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white" | class="button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white" | ||||
| >Reset</a | >Reset</a | ||||
| > | > | ||||
| <a | <a | ||||
| href="" | |||||
| class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600" | class="button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600" | ||||
| >Metal</a | >Metal</a | ||||
| > | > | ||||