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 @@
"amfe-flexible": "^2.2.1",
"jsbarcode": "^3.6.0",
"vant": "^1.4.1",
"vconsole": "^3.2.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.1.0"
......
src/assets/css/common.css
......@@ -3,6 +3,10 @@
padding: 0;
}
html, body {
font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
article,
aside,
details,
......@@ -188,6 +192,10 @@ a {
font-size: 50px;
}
.font-w-500 {
font-weight: 500;
}
.color-232326 {
color: #232326;
}
......@@ -240,6 +248,10 @@ a {
padding: 0 12px;
}
.p-l-8 {
padding-left: 8px;
}
.p-t-10 {
padding-top: 10px;
}
......@@ -335,14 +347,14 @@ a {
.qrcode-dialog {
position: fixed;
z-index: 13;
width: 85%;
width: 70%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FAFAFC;
text-align: center;
border-radius: 3px;
border-radius: 8px;
}
/* 三角 */
......@@ -355,17 +367,24 @@ a {
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #666;
border-bottom: 9px solid #666;
}
/* 无数据 */
.no-data-contain {
position: absolute;
top: 50%;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
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 */
.clique-logo {
......@@ -10,7 +22,6 @@
width: 50%;
}
/* 条形码 */
.clique-qrcode {
......@@ -24,6 +35,7 @@
.clique-qrcode p {
text-align: center;
margin-top: -6px;
}
......@@ -31,7 +43,7 @@
.clique-menu {
width: 100%;
padding: 20px 0;
padding: 15px 0;
}
.clique-menu-cell:after {
......@@ -43,6 +55,10 @@
text-align: center;
}
.van-swipe__indicator {
background: rgba(35,35,38,0.3);
}
/* 品牌 logo */
......@@ -77,6 +93,8 @@
}
.clique-brand-logo img {
display: inline-block;
vertical-align: top;
width: 100%;
}
......@@ -89,4 +107,4 @@
height: 54px;
line-height: 54px;
padding: 0 16px;
}
\ No newline at end of file
}
src/main.js
......@@ -5,6 +5,10 @@ import store from './store/index'
import { router } from './router';
import './assets/font/iconfont.css';
import './assets/css/common.css';
/* eslint-disable */
import VConsole from 'vconsole';
let vConsole = new VConsole();
new Vue({
router,
......
src/views/cards/index.vue
......@@ -34,14 +34,14 @@
</div>
</div>
<div class="no-card-data no-data-contain" v-if="!cardList.length">
<i class="font_family icon-youhuiquanweikong font-50 color-606266"></i>
<p class="font-14 color-303133">优惠券为空</p>
<img src="../../assets/images/coupon-null-icon.png" alt="card-no-data"/>
<p class="font-16 color-848689">你还没有卡券哦</p>
</div>
</div>
</template>
<script>
// import { formatPhone } from '@/assets/js/public.js';
import formatPhone from '@/assets/js/public.js';
import { Icon } from 'vant';
export default {
name: "cards",
......@@ -110,6 +110,10 @@ export default {
showAllData(item) {
item.showCount = item.cardData.length;
}
},
mounted(){
/* eslint-disable */
console.log( formatPhone.formatPhone(12345678900) );
}
};
</script>
......
src/views/index/index.vue
......@@ -14,11 +14,11 @@
<section>
<div class="clique-menu flex">
<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>
</div>
<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>
</div>
<div class="flex-1 flex flex-column clique-menu-cell border-left-1" @click="changeRoute('cards')">
......@@ -33,7 +33,7 @@
</section>
<section>
<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">
<img :src="thumb" >
</van-swipe-item>
......@@ -56,18 +56,18 @@
<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-mask" @click="closeDialog"></div>
<div class="qrcode-dialog">
<span class="qrcode-dialog-close" @click="closeDialog">+</span>
<div class="qrcode-dialog" :style="{'top': $store.state.bodyH/2 + 'px'}">
<span class="qrcode-dialog-close" @click="closeDialog"><van-icon name="cross" /></span>
<div class="qrcode-dialog_hd">
<img :src="dialogData.logo" alt="log0"/>
</div>
<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">长 按 二 维 码 关 注 我 们</p>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -75,18 +75,20 @@
import JsBarcode from 'jsbarcode';
import {
Swipe,
SwipeItem
SwipeItem,
Icon
} from 'vant';
export default {
components: {
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem
[SwipeItem.name]: SwipeItem,
[Icon.name]: Icon
},
data() {
return {
cliqueCard: true, // 是否有集团卡
cliqueCard: false, // 是否有集团卡
banners: {
title: 'test',
price: 2680,
......@@ -102,27 +104,27 @@ export default {
{
src: require('../../assets/images/logo01.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'),
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'),
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'),
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'),
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'),
......@@ -131,8 +133,8 @@ export default {
],
qrcodeVisable: false,
dialogData: {
logo: require('../../assets/images/logo01.png'),
qrcode: require('../../assets/images/logo1.png')
logo: require('../../assets/images/logo01_248_124.png'),
qrcode: require('../../assets/images/001.png')
}
};
},
......@@ -163,6 +165,7 @@ export default {
}
that.qrcodeVisable = true;
document.body.style.overflow = 'hidden';
document.body.classList.add("fixed");
},
/**
......@@ -172,16 +175,19 @@ export default {
const that = this;
that.qrcodeVisable = false;
document.body.style.overflow = 'unset';
document.body.classList.remove("fixed");
document.body.removeAttribute("class");
},
/**
* 生成条形码
*/
barcode() {
JsBarcode("#barcode", "23334444f",{
JsBarcode("#barcode", "122223334444f",{
format: 'CODE128',
displayValue: false,
background: "#ffffff"
background: "#ffffff",
height: '60'
})
}
},
......@@ -194,6 +200,9 @@ export default {
<style lang="less">
@import url(../../assets/css/index.css);
.index-contain {
position: relative;
}
/* 弹窗 */
.qrcode-dialog_confirm {
......@@ -217,9 +226,13 @@ export default {
width: 28px;
height: 28px;
line-height: 28px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
.van-icon-cross {
font-size: 14px;
color: #848689;
}
// -webkit-transform: rotate(45deg);
// -moz-transform: rotate(45deg);
// transform: rotate(45deg);
}
.qrcode-dialog_hd {
......@@ -231,15 +244,42 @@ export default {
}
.qrcode-dialog_bd {
img {
width: 160px;
margin: 0 auto;
.qrcode-outer {
position: relative;
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 {
position: relative;
&.triangle-p {
width: 100%;
height: 20px;
height: 22px;
// padding-top: 8px;
i {
top: 40%
}
}
}
}
......
src/views/point/index.vue
......@@ -6,9 +6,10 @@
</div>
<div class="point-body" :style="{'min-height': $store.state.bodyH - 113 + 'px'}">
<van-list
v-if="list.length"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
finished-text=" "
@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_left flex-1">
......@@ -22,8 +23,8 @@
</div>
</van-list>
<div class="no-recorde-data no-data-contain" v-if="!list.length">
<i class="font_family icon-mendianxiaofeijiluweikong font-50 color-606266"></i>
<p class="font-14 color-303133">门店消费记录为空</p>
<img src="../../assets/images/data-null-icon.png" alt="card-no-data"/>
<p class="font-16 color-848689">暂无积分明细</p>
</div>
</div>
</div>
......@@ -41,12 +42,12 @@ export default {
return {
pointNum: '10,000',
list: [
// {
// name: '今日签到',
// brandName: '[MATERIAL GIRL]',
// date: '2018-12-06 10:32',
// point: '5'
// }
{
name: '今日签到',
brandName: '[MATERIAL GIRL]',
date: '2018-12-06 10:32',
point: '5'
}
],
loading: false,
finished: false
......@@ -79,11 +80,13 @@ export default {
</script>
<style lang="less" scoped>
@import '../../assets/css/fonts.css';
.point-header {
width: 100%;
padding: 15px 0 15px 31px;
background: url('../../assets/images/banner_bg.png') no-repeat center center;
background-size: 100%;
font-family: 'DINPro';
}
.point-body {
......
src/views/records/index.vue
......@@ -2,9 +2,10 @@
<div class="recorde-contian bg-f4f5f6" :style="{'min-height': $store.state.bodyH + 'px'}">
<div class="list-contian">
<van-list
v-if="list.length"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
finished-text=" "
@load="onLoad">
<div class="recorde-list-cell bg-fff border-box" v-for="(item,index) in list" :key="index+item.storeName">
<div
......@@ -22,20 +23,20 @@
</div>
</div>
<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>
</div>
<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_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>
</van-list>
</div>
<div class="no-recorde-data no-data-contain" v-if="!list.length">
<i class="font_family icon-mendianxiaofeijiluweikong font-50 color-606266"></i>
<p class="font-14 color-303133">门店消费记录为空</p>
<img src="../../assets/images/store-record-null-icon.png" alt="record-no-data"/>
<p class="font-16 color-848689">暂无消费记录</p>
</div>
</div>
</template>
......
vue.config.js
......@@ -21,11 +21,8 @@ module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.join(__dirname, 'src'),
'assets': path.join(__dirname, 'src/assets'),
'components': path.join(__dirname, 'src/components'),
'views': path.join(__dirname, 'src/views'),
'@': path.resolve(__dirname, 'src')
}
}
},
}
};
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