Skip to content

W
wechat-web
Commit cdce2a06 by 无尘
Options

style: 修改样式

parent b3d817e2
Showing with 147 additions and 54 deletions
package.json
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"jsbarcode": "^3.6.0", "jsbarcode": "^3.6.0",
"vant": "^1.4.1", "vant": "^1.4.1",
"vconsole": "^3.2.2",
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.1.0" "vuex": "^3.1.0"
......
src/assets/css/common.css
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
padding: 0; padding: 0;
} }
html, body {
font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
article, article,
aside, aside,
details, details,
...@@ -188,6 +192,10 @@ a { ...@@ -188,6 +192,10 @@ a {
font-size: 50px; font-size: 50px;
} }
.font-w-500 {
font-weight: 500;
}
.color-232326 { .color-232326 {
color: #232326; color: #232326;
} }
...@@ -240,6 +248,10 @@ a { ...@@ -240,6 +248,10 @@ a {
padding: 0 12px; padding: 0 12px;
} }
.p-l-8 {
padding-left: 8px;
}
.p-t-10 { .p-t-10 {
padding-top: 10px; padding-top: 10px;
} }
...@@ -335,14 +347,14 @@ a { ...@@ -335,14 +347,14 @@ a {
.qrcode-dialog { .qrcode-dialog {
position: fixed; position: fixed;
z-index: 13; z-index: 13;
width: 85%; width: 70%;
top: 50%; top: 50%;
left: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #FAFAFC; background-color: #FAFAFC;
text-align: center; text-align: center;
border-radius: 3px; border-radius: 8px;
} }
/* 三角 */ /* 三角 */
...@@ -355,17 +367,24 @@ a { ...@@ -355,17 +367,24 @@ a {
height: 0; height: 0;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-bottom: 10px solid #666; border-bottom: 9px solid #666;
} }
/* 无数据 */ /* 无数据 */
.no-data-contain { .no-data-contain {
position: absolute; position: absolute;
top: 50%; top: 40%;
left: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center; text-align: center;
font-size: 16px;
color: #848689;
}
.no-data-contain img {
width: 80px;
padding-bottom: 10px;
} }
src/assets/css/fonts.css 0 → 100644
@font-face {
font-family: 'DINPro';
/* src: url('BebasNeueBold.ttf') format('truetype'); */
src: url('DINPro-Bold.otf');
font-weight: bold;
font-style: normal;
}
src/assets/css/index.css
body {
width: 100%;
height: 100%;
}
.fixed {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* logo */ /* logo */
.clique-logo { .clique-logo {
...@@ -10,7 +22,6 @@ ...@@ -10,7 +22,6 @@
width: 50%; width: 50%;
} }
/* 条形码 */ /* 条形码 */
.clique-qrcode { .clique-qrcode {
...@@ -24,6 +35,7 @@ ...@@ -24,6 +35,7 @@
.clique-qrcode p { .clique-qrcode p {
text-align: center; text-align: center;
margin-top: -6px;
} }
...@@ -31,7 +43,7 @@ ...@@ -31,7 +43,7 @@
.clique-menu { .clique-menu {
width: 100%; width: 100%;
padding: 20px 0; padding: 15px 0;
} }
.clique-menu-cell:after { .clique-menu-cell:after {
...@@ -43,6 +55,10 @@ ...@@ -43,6 +55,10 @@
text-align: center; text-align: center;
} }
.van-swipe__indicator {
background: rgba(35,35,38,0.3);
}
/* 品牌 logo */ /* 品牌 logo */
...@@ -77,6 +93,8 @@ ...@@ -77,6 +93,8 @@
} }
.clique-brand-logo img { .clique-brand-logo img {
display: inline-block;
vertical-align: top;
width: 100%; width: 100%;
} }
...@@ -89,4 +107,4 @@ ...@@ -89,4 +107,4 @@
height: 54px; height: 54px;
line-height: 54px; line-height: 54px;
padding: 0 16px; padding: 0 16px;
} }
\ No newline at end of file
src/main.js
...@@ -5,6 +5,10 @@ import store from './store/index' ...@@ -5,6 +5,10 @@ import store from './store/index'
import { router } from './router'; import { router } from './router';
import './assets/font/iconfont.css'; import './assets/font/iconfont.css';
import './assets/css/common.css'; import './assets/css/common.css';
/* eslint-disable */
import VConsole from 'vconsole';
let vConsole = new VConsole();
new Vue({ new Vue({
router, router,
......
src/views/cards/index.vue
...@@ -34,14 +34,14 @@ ...@@ -34,14 +34,14 @@
</div> </div>
</div> </div>
<div class="no-card-data no-data-contain" v-if="!cardList.length"> <div class="no-card-data no-data-contain" v-if="!cardList.length">
<i class="font_family icon-youhuiquanweikong font-50 color-606266"></i> <img src="../../assets/images/coupon-null-icon.png" alt="card-no-data"/>
<p class="font-14 color-303133">优惠券为空</p> <p class="font-16 color-848689">你还没有卡券哦</p>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import { formatPhone } from '@/assets/js/public.js'; import formatPhone from '@/assets/js/public.js';
import { Icon } from 'vant'; import { Icon } from 'vant';
export default { export default {
name: "cards", name: "cards",
...@@ -110,6 +110,10 @@ export default { ...@@ -110,6 +110,10 @@ export default {
showAllData(item) { showAllData(item) {
item.showCount = item.cardData.length; item.showCount = item.cardData.length;
} }
},
mounted(){
/* eslint-disable */
console.log( formatPhone.formatPhone(12345678900) );
} }
}; };
</script> </script>
......
src/views/index/index.vue
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
<section> <section>
<div class="clique-menu flex"> <div class="clique-menu flex">
<div class="flex-1 flex flex-column clique-menu-cell" @click="changeRoute('point')"> <div class="flex-1 flex flex-column clique-menu-cell" @click="changeRoute('point')">
<p class="color-232326 font-20">10,000</p> <p class="color-232326 font-20 font-w-500">10,000</p>
<p class="color-848689 font-14 m-t-6">可用积分</p> <p class="color-848689 font-14 m-t-6">可用积分</p>
</div> </div>
<div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('records')"> <div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('records')">
<p class="color-232326 font-20">100</p> <p class="color-232326 font-20 font-w-500">2</p>
<p class="color-848689 font-14 m-t-6">消费记录</p> <p class="color-848689 font-14 m-t-6">消费记录</p>
</div> </div>
<div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('cards')"> <div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('cards')">
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</section> </section>
<section> <section>
<div class="clique-swiper"> <div class="clique-swiper">
<van-swipe class="goods-swipe" :autoplay="3000" :height="140"> <van-swipe class="goods-swipe" :autoplay="3000" :height="140" indicator-color="#232326">
<van-swipe-item v-for="thumb in banners.thumb" :key="thumb"> <van-swipe-item v-for="thumb in banners.thumb" :key="thumb">
<img :src="thumb" > <img :src="thumb" >
</van-swipe-item> </van-swipe-item>
...@@ -56,18 +56,18 @@ ...@@ -56,18 +56,18 @@
<p class="font-12 color-848689 p-tips border-box"><a href="" class="font-12 color-848689 ">让每个人尽享时常圈的乐趣~</a></p> <p class="font-12 color-848689 p-tips border-box"><a href="" class="font-12 color-848689 ">让每个人尽享时常圈的乐趣~</a></p>
<div class="qrcode-dialog_confirm" id="dialog" v-if="qrcodeVisable"> <div class="qrcode-dialog_confirm" id="dialog" v-if="qrcodeVisable">
<div class="qrcode-mask" @click="closeDialog"></div> <div class="qrcode-mask" @click="closeDialog"></div>
<div class="qrcode-dialog"> <div class="qrcode-dialog" :style="{'top': $store.state.bodyH/2 + 'px'}">
<span class="qrcode-dialog-close" @click="closeDialog">+</span> <span class="qrcode-dialog-close" @click="closeDialog"><van-icon name="cross" /></span>
<div class="qrcode-dialog_hd"> <div class="qrcode-dialog_hd">
<img :src="dialogData.logo" alt="log0"/> <img :src="dialogData.logo" alt="log0"/>
</div> </div>
<div class="qrcode-dialog_bd"> <div class="qrcode-dialog_bd">
<img :src="dialogData.qrcode" alt="qrcode"/> <div class="qrcode-outer border-box"><img :src="dialogData.qrcode" alt="qrcode"/></div>
<p class="font-12 color-666 text-center triangle-p"><i class="triangle-up"></i></p> <p class="font-12 color-666 text-center triangle-p"><i class="triangle-up"></i></p>
<p class="font-12 color-666 text-center">长 按 二 维 码 关 注 我 们</p> <p class="font-12 color-666 text-center">长 按 二 维 码 关 注 我 们</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -75,18 +75,20 @@ ...@@ -75,18 +75,20 @@
import JsBarcode from 'jsbarcode'; import JsBarcode from 'jsbarcode';
import { import {
Swipe, Swipe,
SwipeItem SwipeItem,
Icon
} from 'vant'; } from 'vant';
export default { export default {
components: { components: {
[Swipe.name]: Swipe, [Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem [SwipeItem.name]: SwipeItem,
[Icon.name]: Icon
}, },
data() { data() {
return { return {
cliqueCard: true, // 是否有集团卡 cliqueCard: false, // 是否有集团卡
banners: { banners: {
title: 'test', title: 'test',
price: 2680, price: 2680,
...@@ -102,27 +104,27 @@ export default { ...@@ -102,27 +104,27 @@ export default {
{ {
src: require('../../assets/images/logo01.png'), src: require('../../assets/images/logo01.png'),
imgSrc: require('../../assets/images/logo01_248_124.png'), imgSrc: require('../../assets/images/logo01_248_124.png'),
qrcode: require('../../assets/images/logo1.png'), qrcode: require('../../assets/images/001.png'),
}, },
{ {
src: require('../../assets/images/logo02.png'), src: require('../../assets/images/logo02.png'),
imgSrc: require('../../assets/images/logo02_248_124.png'), imgSrc: require('../../assets/images/logo02_248_124.png'),
qrcode: require('../../assets/images/logo1.png'), qrcode: require('../../assets/images/002.png'),
}, },
{ {
src: require('../../assets/images/logo03.png'), src: require('../../assets/images/logo03.png'),
imgSrc: require('../../assets/images/logo03_248_124.png'), imgSrc: require('../../assets/images/logo03_248_124.png'),
qrcode: require('../../assets/images/logo1.png'), qrcode: require('../../assets/images/003.png'),
}, },
{ {
src: require('../../assets/images/logo04.png'), src: require('../../assets/images/logo04.png'),
imgSrc: require('../../assets/images/logo04_248_124.png'), imgSrc: require('../../assets/images/logo04_248_124.png'),
qrcode: require('../../assets/images/logo1.png'), qrcode: require('../../assets/images/004.png'),
}, },
{ {
src: require('../../assets/images/logo05.png'), src: require('../../assets/images/logo05.png'),
imgSrc: require('../../assets/images/logo05_248_124.png'), imgSrc: require('../../assets/images/logo05_248_124.png'),
qrcode: require('../../assets/images/logo1.png'), qrcode: require('../../assets/images/005.png'),
}, },
{ {
src: require('../../assets/images/logo06.png'), src: require('../../assets/images/logo06.png'),
...@@ -131,8 +133,8 @@ export default { ...@@ -131,8 +133,8 @@ export default {
], ],
qrcodeVisable: false, qrcodeVisable: false,
dialogData: { dialogData: {
logo: require('../../assets/images/logo01.png'), logo: require('../../assets/images/logo01_248_124.png'),
qrcode: require('../../assets/images/logo1.png') qrcode: require('../../assets/images/001.png')
} }
}; };
}, },
...@@ -163,6 +165,7 @@ export default { ...@@ -163,6 +165,7 @@ export default {
} }
that.qrcodeVisable = true; that.qrcodeVisable = true;
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.body.classList.add("fixed");
}, },
/** /**
...@@ -172,16 +175,19 @@ export default { ...@@ -172,16 +175,19 @@ export default {
const that = this; const that = this;
that.qrcodeVisable = false; that.qrcodeVisable = false;
document.body.style.overflow = 'unset'; document.body.style.overflow = 'unset';
document.body.classList.remove("fixed");
document.body.removeAttribute("class");
}, },
/** /**
* 生成条形码 * 生成条形码
*/ */
barcode() { barcode() {
JsBarcode("#barcode", "23334444f",{ JsBarcode("#barcode", "122223334444f",{
format: 'CODE128', format: 'CODE128',
displayValue: false, displayValue: false,
background: "#ffffff" background: "#ffffff",
height: '60'
}) })
} }
}, },
...@@ -194,6 +200,9 @@ export default { ...@@ -194,6 +200,9 @@ export default {
<style lang="less"> <style lang="less">
@import url(../../assets/css/index.css); @import url(../../assets/css/index.css);
.index-contain {
position: relative;
}
/* 弹窗 */ /* 弹窗 */
.qrcode-dialog_confirm { .qrcode-dialog_confirm {
...@@ -217,9 +226,13 @@ export default { ...@@ -217,9 +226,13 @@ export default {
width: 28px; width: 28px;
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
-webkit-transform: rotate(45deg); .van-icon-cross {
-moz-transform: rotate(45deg); font-size: 14px;
transform: rotate(45deg); color: #848689;
}
// -webkit-transform: rotate(45deg);
// -moz-transform: rotate(45deg);
// transform: rotate(45deg);
} }
.qrcode-dialog_hd { .qrcode-dialog_hd {
...@@ -231,15 +244,42 @@ export default { ...@@ -231,15 +244,42 @@ export default {
} }
.qrcode-dialog_bd { .qrcode-dialog_bd {
img { width: 160px;
margin: 0 auto;
.qrcode-outer {
position: relative;
width: 150px; width: 150px;
height: 160px;
margin: 0 auto;
margin-left: -3px;
border-bottom: 10px solid rgba(0,0,0,0.15);
border-left: 10px solid rgba(0,0,0,0.15);
&::before {
content: '';
position: absolute;
left: -11px;
top: -1px;
width: 11px;
height: 11px;
background: #FAFAFC;
}
img {
display: inline-block;
vertical-align: bottom;
width: 150px;
}
} }
p { p {
position: relative; position: relative;
&.triangle-p { &.triangle-p {
width: 100%; width: 100%;
height: 20px; height: 22px;
// padding-top: 8px;
i {
top: 40%
}
} }
} }
} }
......
src/views/point/index.vue
...@@ -6,9 +6,10 @@ ...@@ -6,9 +6,10 @@
</div> </div>
<div class="point-body" :style="{'min-height': $store.state.bodyH - 113 + 'px'}"> <div class="point-body" :style="{'min-height': $store.state.bodyH - 113 + 'px'}">
<van-list <van-list
v-if="list.length"
v-model="loading" v-model="loading"
:finished="finished" :finished="finished"
finished-text="没有更多了" finished-text=" "
@load="onLoad"> @load="onLoad">
<div class="point-list-cell border-box flex border-bottom-1" v-for="(item,index) in list" :key="index+item.name"> <div class="point-list-cell border-box flex border-bottom-1" v-for="(item,index) in list" :key="index+item.name">
<div class="point-list-cell_left flex-1"> <div class="point-list-cell_left flex-1">
...@@ -22,8 +23,8 @@ ...@@ -22,8 +23,8 @@
</div> </div>
</van-list> </van-list>
<div class="no-recorde-data no-data-contain" v-if="!list.length"> <div class="no-recorde-data no-data-contain" v-if="!list.length">
<i class="font_family icon-mendianxiaofeijiluweikong font-50 color-606266"></i> <img src="../../assets/images/data-null-icon.png" alt="card-no-data"/>
<p class="font-14 color-303133">门店消费记录为空</p> <p class="font-16 color-848689">暂无积分明细</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -41,12 +42,12 @@ export default { ...@@ -41,12 +42,12 @@ export default {
return { return {
pointNum: '10,000', pointNum: '10,000',
list: [ list: [
// { {
// name: '今日签到', name: '今日签到',
// brandName: '[MATERIAL GIRL]', brandName: '[MATERIAL GIRL]',
// date: '2018-12-06 10:32', date: '2018-12-06 10:32',
// point: '5' point: '5'
// } }
], ],
loading: false, loading: false,
finished: false finished: false
...@@ -79,11 +80,13 @@ export default { ...@@ -79,11 +80,13 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '../../assets/css/fonts.css';
.point-header { .point-header {
width: 100%; width: 100%;
padding: 15px 0 15px 31px; padding: 15px 0 15px 31px;
background: url('../../assets/images/banner_bg.png') no-repeat center center; background: url('../../assets/images/banner_bg.png') no-repeat center center;
background-size: 100%; background-size: 100%;
font-family: 'DINPro';
} }
.point-body { .point-body {
......
src/views/records/index.vue
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
<div class="recorde-contian bg-f4f5f6" :style="{'min-height': $store.state.bodyH + 'px'}"> <div class="recorde-contian bg-f4f5f6" :style="{'min-height': $store.state.bodyH + 'px'}">
<div class="list-contian"> <div class="list-contian">
<van-list <van-list
v-if="list.length"
v-model="loading" v-model="loading"
:finished="finished" :finished="finished"
finished-text="没有更多了" finished-text=" "
@load="onLoad"> @load="onLoad">
<div class="recorde-list-cell bg-fff border-box" v-for="(item,index) in list" :key="index+item.storeName"> <div class="recorde-list-cell bg-fff border-box" v-for="(item,index) in list" :key="index+item.storeName">
<div <div
...@@ -22,20 +23,20 @@ ...@@ -22,20 +23,20 @@
</div> </div>
</div> </div>
<div class="recorde-list-cell_sku flex flex-align-center border-bottom-1 border-box padding-lr-12"> <div class="recorde-list-cell_sku flex flex-align-center border-bottom-1 border-box padding-lr-12">
<div class="flex-1 font-12 color-848689">颜色分类：{{ childItem.color }} 尺码：{{ childItem.size }}</div> <div class="flex-1 font-12 color-848689"><span>颜色分类: {{ childItem.color }} </span> <span class="p-l-8"> 尺码: {{ childItem.size }}</span></div>
<div class="flex-1 font-12 color-848689 text-right"><van-icon name="cross"></van-icon>{{ childItem.goodsNum}}</div> <div class="flex-1 font-12 color-848689 text-right"><van-icon name="cross"></van-icon>{{ childItem.goodsNum}}</div>
</div> </div>
</div> </div>
<div class="recorde-list-cell_sub flex flex-align-center border-box padding-lr-12"> <div class="recorde-list-cell_sub flex flex-align-center border-box padding-lr-12">
<div class="list-cell_sub_date flex-1 font-12 color-232326">{{ item.date }} 购买</div> <div class="list-cell_sub_date flex-1 font-12 color-232326">{{ item.date }} 购买</div>
<div class="list-cell_sub_all flex-1 font-12 color-232326 text-right">共{{ item.goodsNum }}件商品 实付款：{{ item.priceAll }}</div> <div class="list-cell_sub_all flex-1 font-12 color-232326 text-right">共{{ item.goodsNum }}件商品 实付款: {{ item.priceAll }}</div>
</div> </div>
</div> </div>
</van-list> </van-list>
</div> </div>
<div class="no-recorde-data no-data-contain" v-if="!list.length"> <div class="no-recorde-data no-data-contain" v-if="!list.length">
<i class="font_family icon-mendianxiaofeijiluweikong font-50 color-606266"></i> <img src="../../assets/images/store-record-null-icon.png" alt="record-no-data"/>
<p class="font-14 color-303133">门店消费记录为空</p> <p class="font-16 color-848689">暂无消费记录</p>
</div> </div>
</div> </div>
</template> </template>
......
vue.config.js
...@@ -21,11 +21,8 @@ module.exports = { ...@@ -21,11 +21,8 @@ module.exports = {
configureWebpack: { configureWebpack: {
resolve: { resolve: {
alias: { alias: {
'@': path.join(__dirname, 'src'), '@': path.resolve(__dirname, 'src')
'assets': path.join(__dirname, 'src/assets'),
'components': path.join(__dirname, 'src/components'),
'views': path.join(__dirname, 'src/views'),
} }
} }
}, }
}; };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment