Skip to content

dev / baohui-jewelry-pro

Go to a project
Toggle navigation
Toggle navigation pinning
97cfac9a by simon
Options

no message

1 parent 7fec4592
Inline Side-by-side
Showing 28 changed files with 1093 additions and 139 deletions
......@@ -763,6 +763,7 @@
"version": "7.4.5",
"resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.4.5.tgz",
"integrity": "sha1-WCu1MfX53GfS/LaCl5iU914lPxI=",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.2"
}
......@@ -969,15 +970,11 @@
"integrity": "sha1-aQoUdbhPKohP0HzXl8APXzE1bqg=",
"dev": true
},
"@vant/icons": {
"version": "1.1.7",
"resolved": "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.1.7.tgz",
"integrity": "sha1-KVYa3/+mp1DSedzNvpppt0OTTz8="
},
"@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
"integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA="
"integrity": "sha1-BI/leZWNpAj7eosqPsBQtQpmEEA=",
"dev": true
},
"@vue/babel-plugin-transform-vue-jsx": {
"version": "1.0.0",
......@@ -5412,7 +5409,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -5433,12 +5431,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -5453,17 +5453,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -5580,7 +5583,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -5592,6 +5596,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -5606,6 +5611,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -5613,12 +5619,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -5637,6 +5645,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -5717,7 +5726,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -5729,6 +5739,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -5814,7 +5825,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -5850,6 +5862,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -5869,6 +5882,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -5912,12 +5926,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......@@ -10169,7 +10185,8 @@
"regenerator-runtime": {
"version": "0.13.2",
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.2.tgz",
"integrity": "sha1-MuWcmm+5saSv8JtJMMotRHc0NEc="
"integrity": "sha1-MuWcmm+5saSv8JtJMMotRHc0NEc=",
"dev": true
},
"regenerator-transform": {
"version": "0.14.0",
......@@ -10520,7 +10537,8 @@
"version": "4.0.8",
"resolved": "https://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
"integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
"dev": true
"dev": true,
"optional": true
},
"rx-lite-aggregates": {
"version": "4.0.8",
......@@ -12413,17 +12431,6 @@
"spdx-expression-parse": "^3.0.0"
}
},
"vant": {
"version": "1.6.21",
"resolved": "https://registry.npm.taobao.org/vant/download/vant-1.6.21.tgz",
"integrity": "sha1-7MdP1p/ND6EeQX5Q9XaEsFPgyzw=",
"requires": {
"@babel/runtime": "^7.4.3",
"@vant/icons": "1.1.7",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
"vue-lazyload": "1.2.3"
}
},
"vary": {
"version": "1.1.2",
"resolved": "http://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
......@@ -12505,11 +12512,6 @@
"integrity": "sha1-J1b0bLMlgFTF9HI96K5+hzAqHM8=",
"dev": true
},
"vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz",
"integrity": "sha1-kB+ewVx+bKeHgaK65KNDaGve2yw="
},
"vue-loader": {
"version": "15.7.0",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.7.0.tgz",
......
......@@ -21,7 +21,7 @@
"mockjs": "^1.0.1-beta3",
"postcss-px2rem": "^0.3.0",
"postcss-pxtorem": "^4.0.1",
"vant": "^1.6.21",
"vant": "^2.2.11",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
......
......@@ -8,13 +8,12 @@
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-cli3-framework</title>
<title>宝汇珠宝</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-cli3-framework doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
<strong>您的浏览器有点历史了，请升级新的浏览器~</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
......
<template>
<div id="app">
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>-->
<router-view/>
</div>
</template>
......@@ -22,6 +18,7 @@
margin: 0;
padding: 0;
font-size: 20px;
color: #333333;
}
body,
......@@ -31,6 +28,12 @@ div {
padding: 0;
}
input {
background: none;
outline: none;
border: none;
}
.app__width {
width: 750px;
}
......@@ -87,4 +90,28 @@ div {
height: 20px;
}
}
// 产品详情页面
.page-product-detail {
.van-swipe__indicator {
width: 20px;
height: 20px;
}
[class*="van-hairline"]::after {
border: none;
}
.van-sticky {
border-bottom: 1px solid #ebedf0;
}
}
// 我的收藏
.page-favorite {
.van-tabs__wrap {
}
.van-tab {
}
}
</style>
......
......@@ -13,11 +13,17 @@ Vue.config.productionTip = false
import {
Swipe,
SwipeItem,
Lazyload
Lazyload,
Tab,
Tabs,
Sticky
} from 'vant';
Vue.use(Swipe).use(SwipeItem);
Vue.use(Lazyload);
Vue.use(Tab).use(Tabs);
Vue.use(Sticky);
new Vue({
router,
......
......@@ -7,15 +7,30 @@ import {
export default {
data() {
return {
key: 'value'
key: 'value',
active: 0,
images: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg'
],
sticky: true,
}
},
components: {},
methods: {
onFavoriteHandler() {
},
onContactUsHandler() {
},
onNavHandler(index, title) {
// document.getElementById("scroll" + index).scrollIntoView({
// behavior: "smooth",
// });
},
initData() {}
},
mounted() {},
created() {
console.log("demo created");
}
created() {}
}
......
@import './../../styles/support';
.page {}
.nav {
@extend .bb;
display: flex;
justify-content: center;
align-items: center;
&-v-line {
width: 4px;
height: 45px;
background-color: #adadad;
}
&-item {
color: #adadad;
position: relative;
@extend .bb;
padding: 0 40;
text-align: center;
width: 100%;
height: 112px;
padding-top: 32px;
font-size: 30px;
}
.active {
color: #c28585;
.under {
position: absolute;
height: 3px;
width: 112px;
background-color: #c28585;
left: 0;
right: 0;
bottom: 24px;
margin: 0 auto;
}
}
}
.shop-list {
width: $contentWidth;
margin: 54px auto 0;
}
// 店铺信息
.shop {
display: flex;
align-items: center;
margin: 0 auto 48px;
height: auto;
&-icon {
width: 120px;
height: 120px;
border-radius: 120px;
border: solid 1px #333333;
}
&-detail {
flex: 1;
@extend .bb;
height: 120px;
padding: 0 12px 0 24px;
flex-wrap: wrap;
display: flex;
align-content: space-between;
height: auto;
div {
width: 100%;
}
&-title {
font-size: 28px;
}
&-desc {
font-size: 18px;
}
}
&-btn-wrap {
.shop-btn {
@include btc(148px, 52px);
background-color: #cc9999;
border-radius: 52px;
color: #ffffff;
margin: 12px 0;
font-size: 24px;
}
.shop-btn2 {
background: transparent;
border: solid 1px #ffffff;
}
}
}
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="nav">
<div class="nav-item active">
收藏的店铺
<div class="under"></div>
</div>
<div class="nav-v-line"></div>
<div class="nav-item">
收藏的商品
<div class="under"></div>
</div>
</div>
<div class="content">
<div class="shop-list">
<div class="shop" v-for="(item,index) in 4" :key="index">
<div class="shop-icon"></div>
<div class="shop-detail">
<div class="cTitle shop-detail-title">xxx珠宝首饰有限公司</div>
<div class="shop-detail-desc">
<div class="t1">15012341234</div>
<div class="t1">广州市番禺区xx路宝汇珠宝交易中心888号</div>
<div class="t1">mail@baohui.com</div>
</div>
</div>
<div class="shop-btn-wrap">
<div @click="onFavoriteHandler" class="shop-btn">查看店铺</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./favorite.js"></script>
<style lang="scss" scoped>
@import "./favorite.scss";
</style>
......@@ -16,6 +16,16 @@ export default {
},
components: {},
methods: {
toProduct(item) {
this.$router.push({
path: "/product/detail"
})
},
toMyFavorite(){
this.$router.push({
path:"/favorite"
})
},
initData() {}
},
mounted() {},
......
......@@ -10,7 +10,6 @@
@extend .bb;
width: $screenWidth;
.swiper {
width: $screenWidth;
height: 400px;
......
<template>
<div class="page page-index">
<div class="page cPageBottom page-index">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
......@@ -27,7 +27,7 @@
<div class="sel-item sel-item-4">
K金<br>首饰
</div>
<div class="sel-item sel-item-5">
<div class="sel-item sel-item-5" @click="toMyFavorite">
我的<br>收藏
</div>
</div>
......@@ -36,19 +36,7 @@
<div class="product">
<div class="product-title">-- 产品推荐 --</div>
<div class="product-list">
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<div @click="toProduct(item)" v-for="(item,index) in 6" :key="index" class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
......
@import './../../styles/support';
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
</div>
</div>
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
// @import './index.scss';
</style>
\ No newline at end of file
@import './../../styles/support';
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
</div>
</div>
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
// @import './index.scss';
</style>
\ No newline at end of file
......@@ -7,15 +7,34 @@ import {
export default {
data() {
return {
key: 'value'
key: 'value',
active: 0,
images: [
'https://img.yzcdn.cn/vant/apple-1.jpg',
'https://img.yzcdn.cn/vant/apple-2.jpg'
],
sticky: true,
}
},
components: {},
methods: {
onNavHandler(index, title) {
document.getElementById("scroll" + index).scrollIntoView({
behavior: "smooth",
});
},
toTop() {
document.getElementById("scroll0").scrollIntoView({
behavior: "smooth",
});
},
toShopDetail(){
this.$router.push({
path:"/shop/detail"
})
},
initData() {}
},
mounted() {},
created() {
console.log("demo created");
}
created() {}
}
......
@import './../../styles/support';
.page {}
// 分页导航
.nav {
.tabs {
@extend .bb;
padding: 0 50px;
background-color: #ffffff;
}
}
// 轮播banner
.banner {
$bannerWid: $screenWidth;
$bannerHei: 760px;
background-color: #f2f2f2;
@extend .bb;
width: $bannerWid;
height: $bannerHei;
.swiper {
width: $bannerWid;
height: $bannerHei;
.img {
width: $bannerWid;
height: $bannerHei;
}
}
}
.content {
width: $contentWidth;
margin: 0 auto;
}
// 功能导航
.func {
margin: 42px auto;
display: flex;
justify-content: space-between;
align-items: center;
.desc {
&-tit {}
&-desc {
margin-top: 12px;
}
}
.fav {
text-align: center;
color: #cf9e9e;
padding: 0 24px;
&-icon {
@extend .bb;
width: 100%;
.iconfont {
font-size: 52px;
}
}
.btn {
margin-top: 12px;
}
}
}
// 店铺信息
.shop {
margin: 92px auto 0;
display: flex;
align-items: center;
&-icon {
width: 100px;
height: 100px;
border-radius: 100px;
border: solid 1px #333333;
}
&-detail {
flex: 1;
@extend .bb;
padding-left: 24px;
display: flex;
align-content: center;
flex-wrap: wrap;
div {
width: 100%;
margin: 2px 0;
}
&-title {
font-size: 28px;
}
&-phone {}
}
&-btn {
@include btc(148px, 52px);
background-color: #cc9999;
border: solid 1px #333333;
border-radius: 48px;
color: #ffffff;
}
}
// 商品详情
.detail {
margin: 72px auto 0;
}
// 商品参数
.parameter {
margin: 72px auto 0;
&-table {
margin-top: 32px;
&-item {
display: flex;
border: solid 1px $fontGray;
border-bottom: none;
height: 48px;
div {
line-height: 48px;
@extend .bb;
padding: 0 12px;
}
.label {
width: 132px;
border-right: solid 1px $fontGray;
}
.val {
flex: 1;
}
&:last-child {
border-bottom: solid 1px $fontGray;
}
}
}
}
// 返回顶部
.top-btn {
margin: 72px auto 0;
@include btc(232px, 60px);
background-color: #1e9ad3;
color: #ffffff;
border-radius: 8px;
}
<template>
<div class="page cPageBottom page-product-detail">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main" id="scroll0">
<div class="top-space"></div>
<!-- 分页导航 -->
<div class="nav">
<van-sticky>
<van-tabs class="tabs" v-model="active" sticky @click="onNavHandler">
<van-tab title="商品"></van-tab>
<van-tab title="详情"></van-tab>
<van-tab title="参数"></van-tab>
</van-tabs>
</van-sticky>
</div>
<!-- banner -->
<div class="banner">
<van-swipe indicator-color="#ffcc00" class="swiper" :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img class="img" v-lazy="image" />
</van-swipe-item>
</van-swipe>
</div>
<div class="content">
<!-- 功能导航 -->
<div class="func">
<div class="desc">
<div class="cTitle desc-title ">黄金吊坠 - 黄金饰品</div>
<div class="cFontGray desc-desc">商品关键词描述</div>
</div>
<div class="fav">
<div class="fav-icon">
<span class="iconfont iconfavoriteborder"></span>
</div>
<div class="cFontGray fav-btn">收藏</div>
</div>
</div>
<!-- 店铺信息 -->
<div class="shop">
<div class="shop-icon"></div>
<div class="shop-detail">
<div class="cTitle shop-detail-title">xxx珠宝首饰有限公司</div>
<div class="shop-detail-phone">15012341234</div>
</div>
<div @click="toShopDetail" class="shop-btn">进入店铺</div>
</div>
<!-- 商铺详情 -->
<div class="detail" id="scroll1">
<div class="cTitle detail-title">商品详情</div>
<div class="cFontGray detail-desc">暂无详情介绍</div>
</div>
<!-- 商品参数 -->
<div class="parameter" id="scroll2">
<div class="cTitle parameter-title">商品参数 </div>
<div class="cFontGray parameter-table">
<div class="parameter-table-item">
<div class="label">label1</div>
<div class="val">val1</div>
</div>
<div class="parameter-table-item">
<div class="label">label2</div>
<div class="val">val12</div>
</div>
<div class="parameter-table-item">
<div class="label">label3</div>
<div class="val">val13</div>
</div>
<div class="parameter-table-item">
<div class="label">label1</div>
<div class="val">val1</div>
</div>
<div class="parameter-table-item">
<div class="label">label2</div>
<div class="val">val12</div>
</div>
<div class="parameter-table-item">
<div class="label">label3</div>
<div class="val">val13</div>
</div>
</div>
</div>
</div>
<!-- 返回顶部 -->
<div class="top-btn" @click="toTop">返回顶部</div>
</div>
</div>
</template>
<script src="./product-detail.js"></script>
<style lang="scss" scoped>
@import "./product-detail.scss";
</style>
@import './../../styles/support';
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
</div>
</div>
</div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
// @import './index.scss';
</style>
\ No newline at end of file
......@@ -12,10 +12,15 @@ export default {
},
components: {},
methods: {
onFavoriteHandler(){
},
onContactUsHandler(){
},
initData() {}
},
mounted() {},
created() {
console.log("demo created");
}
}
......
@import './../../styles/support';
.page {}
.top {
width: $screenWidth;
// height: 300px;
background-color: wheat;
padding: 16px 0 46px;
background: url("https://huaban.com/go/?pin_id=506749488") center no-repeat;
@extend .bis;
.space1 {
// height: 16px;
}
.search {
margin: 0 auto;
width: 684px;
height: 64px;
display: flex;
justify-content: space-between;
background-color: white;
border-radius: 64px;
&-ipt {
flex: 1;
@extend .bb;
padding: 0 32px;
height: 64px;
input {
width: 100%;
height: 100%;
text-align: center;
}
}
&-icon {
width: 64px;
// height: 64px;
@extend .fcc;
// @extend .bb;
// padding: 0 16px;
padding-right: 16px;
.iconfont {
font-size: 40px;
}
}
}
}
.content {}
// 产品推荐
.product {
margin: 72px auto 0;
width: $contentWidth;
&-title {
text-align: center;
font-size: 32px;
color: #c78f8f;
}
&-list {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
$itemWid: 330px;
.item {
width: $itemWid;
// height: 440px;
background: #F8F8F8;
border-radius: 4px;
margin-bottom: 32px;
padding-bottom: 12px;
.image {
width: $itemWid;
height: $itemWid;
}
.desc {
@extend .bb;
width: 325px;
padding: 4px 20px;
font-size: 24px;
// line-height: 32px;
color: #333333;
// @include ellipsis(3);
}
}
}
}
// 店铺信息
.shop {
width: $contentWidth;
margin: 54px auto 44px;
display: flex;
align-items: center;
&-icon {
width: 120px;
height: 120px;
border-radius: 120px;
border: solid 1px #333333;
}
&-detail {
color: #fdfdfd;
flex: 1;
@extend .bb;
height: 120px;
padding: 0 12px 0 24px;
flex-wrap: wrap;
display: flex;
align-content: space-between;
height: auto;
div {
width: 100%;
}
&-title {
font-size: 28px;
}
&-desc {
font-size: 18px;
}
}
&-btn-wrap {
.shop-btn {
@include btc(148px, 52px);
background-color: #cc9999;
border-radius: 52px;
color: #ffffff;
margin: 12px 0;
font-size: 24px;
}
.shop-btn2 {
background: transparent;
border: solid 1px #ffffff;
}
}
}
<template>
<div class="page cPageBottom page-shop-detail">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<!-- 大标 -->
<div class="top">
<div class="space1"></div>
<div class="search">
<div class="search-ipt">
<input type="text" placeholder="搜索店铺内单品">
</div>
<div class="search-icon">
<span class="iconfont iconicon-test9"></span>
</div>
</div>
<div class="shop">
<div class="shop-icon"></div>
<div class="shop-detail">
<div class="shop-detail-title">xxx珠宝首饰有限公司</div>
<div class="shop-detail-desc">
<div class="t1">15012341234</div>
<div class="t1">广州市番禺区xx路宝汇珠宝交易中心888号</div>
<div class="t1">mail@baohui.com</div>
</div>
</div>
<div class="shop-btn-wrap">
<div @click="onFavoriteHandler" class="shop-btn">收藏店铺</div>
<div @click="onContactUsHandler" class="shop-btn shop-btn2">联系我们</div>
</div>
</div>
</div>
<div class="content">
<div class="product">
<div class="product-title">-- 全部商品 --</div>
<div class="product-list">
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
<div class="item">
<img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="desc">黄金吊坠</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./shop-detail.js"></script>
<style lang="scss" scoped>
@import "./shop-detail.scss";
</style>
......@@ -13,6 +13,30 @@ const routes = [{
}
},
{
path: '/product/detail',
name: 'productDetail',
component: () => import('./pages/product-detail/product-detail.vue'),
meta: {
title: ''
}
},
{
path: '/shop/detail',
name: 'shopDetail',
component: () => import('./pages/shop-detail/shop-detail.vue'),
meta: {
title: ''
}
},
{
path: '/favorite',
name: 'favorite',
component: () => import('./pages/favorite/favorite.vue'),
meta: {
title: ''
}
},
{
path: '/demo',
name: 'demo',
component: () => import('./pages/demo/demo.vue'),
......
/* 图片字体 */
@font-face {
font-family: 'iconfont';
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASEAAsAAAAACSAAAAQ3AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqFGIQnATYCJAMYCw4ABCAFhG0HVBvZBxGVnNvIfhzYDV+BAe9wtJiGONTGYuHBZ/Oh77Q3OxupItOeFFTcQjpRXwK+AIbn08ne766XppsiwRKPksQTj7AO4xAOv3fOAdsJc0KNZO3Io89Lf8K9BkY+ce+4df4Dms+yXMacNNbEAOOAAtrbF1mBxAlqy/Dq8uqwrgMBiPGAD4g6dbgGQhSseQRAKstK8iFMmFAVBMHSdsFWFpkNHhYzhbkEYJb3efIGQUQIDCaFtXQ0l1KEhOfKV+G019Ary7GgbzgHAGEXUIAPABZIZ6GrGTSI+oBia7/A4gVAioWBeq58vvHlkJeNr8INBhIyy0dwwV8esJg4MBAgfGCVlKUNj/HguZIawGrqjZgLPHg5xACK1Y2YCwy8Cpdclo4/YIMIcBLANZh9YGkIPHta2NorTKxUSlUNV7Koz2zswo0mRfNNRs9fbFq8YJr5uEXLWo7cEd+6pbl9W3v3rj4g7tzRpU+7HauR0YbmJ2+dalLELZy6ude0uGh+75Zp5iXFCxZMW2Q+0IQOKsa7SMJIKH18h3y9hWY+mN4tEtW0bYT2memWpk1db7L81tQ7dgs3isUbt1rrl0kU0yy1Sza7ZCw0m4lCIzFMF2ww15+Qp1u43sRk/hJT7YJN5uaLluolPZSTvq1m4vmbgR7veM116OjBGp2K21oMbkRGnvqglnCLVharuAM6gl+toTNYPZs5doyZDXyHbx/RSvZMt6tNtx7RlzkWlcysWQySV2I+Pio008Np8mQvL/j0CEVLLIItloiEIPIFnCBDN7ZpC6n3i/erE0uXICT/t+269rVrjx4de+wrwynfjo1BaN/tXQmzJ3wIF9krghUHqN1eFB4fMvuCROrnvVwdkUeWLff2k70IiO8fs2yOabXpHHdlvX+A5rmK6dx4piXlbHunib+iNeVM+UnXFvWZjR2uleVF/jsbK12wo8OWDpY+TRH0jP8syLs0WIlOAIDhFHOP+gIA1TF3kCOBOcbaj9FjgYCJ97CEFvwt35GfKZ2Yq4j5JiGUsAC+Juu7saSZavDK1Wgs/jeaagB/Q0WUsuYutTOdIKDlmTLhATa03MskN0+G0t1vcjyETCMMArY4CLmQiuaDSSIETSgem7dBu0/G6o2REgGeJiAQSrvAkDsKSukyiaU9Bo+Zd+BTZgwxXdZHSrjFro4ZoqKlgj+VSe4UsdaVX3iDfgeR41KP8UIuNkCBfgHpxBUd8hArGj760FgVcZkjpaLbEAJTbWYHWTeltfaNvz9X9KJNIcfBSrIMhApapMAfKSOxjnJ6V6vM+29AewuEXNFR432BrLCDk0B+AhqQrqquUceljG7woR00qhQ7i5OxiKRiBwSIMlJbPMkBqdoo7RDuNfyZblxT1WZ6TbzLfbBZ53QYQglLeIRPBBB9hPTHH9oLMhQ5r5ipDFwwMRwxRezrfzAAAA==')
format('woff2');
}
src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
}
.iconfont {
.iconfont {
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconrefresh:before {
content: '\e874';
}
.iconempty:before {
content: '\e6a6';
}
.iconclose:before {
content: '\e849';
}
\ No newline at end of file
}
.iconclose1:before {
content: "\e615";
}
.iconrefresh:before {
content: "\e874";
}
.iconfavoriteborder:before {
content: "\e617";
}
.iconhome:before {
content: "\e610";
}
.iconxinzeng:before {
content: "\e606";
}
.iconempty:before {
content: "\e6a6";
}
.iconicon-test:before {
content: "\e633";
}
.iconicon-test1:before {
content: "\e634";
}
.iconicon-test2:before {
content: "\e635";
}
.iconicon-test3:before {
content: "\e636";
}
.iconicon-test4:before {
content: "\e638";
}
.iconicon-test5:before {
content: "\e63a";
}
.iconicon-test6:before {
content: "\e63b";
}
.iconicon-test7:before {
content: "\e63c";
}
.iconicon-test8:before {
content: "\e63d";
}
.iconicon-test9:before {
content: "\e63e";
}
.iconicon-test10:before {
content: "\e63f";
}
.iconicon-test11:before {
content: "\e640";
}
.iconicon-test12:before {
content: "\e641";
}
.iconicon-test13:before {
content: "\e642";
}
.iconicon-test14:before {
content: "\e643";
}
.iconicon-test15:before {
content: "\e644";
}
.iconicon-test16:before {
content: "\e645";
}
.iconicon-test17:before {
content: "\e646";
}
.iconicon-test18:before {
content: "\e647";
}
.iconicon-test19:before {
content: "\e648";
}
.iconicon-test20:before {
content: "\e649";
}
.iconicon-test21:before {
content: "\e64a";
}
.iconicon-test22:before {
content: "\e64b";
}
.iconicon-test23:before {
content: "\e64c";
}
.iconicon-test24:before {
content: "\e64d";
}
.iconicon-test25:before {
content: "\e64e";
}
.iconicon-test26:before {
content: "\e64f";
}
.iconicon-test27:before {
content: "\e650";
}
.iconicon-test28:before {
content: "\e651";
}
.iconicon-test29:before {
content: "\e652";
}
.iconicon-test30:before {
content: "\e653";
}
.iconicon-test31:before {
content: "\e654";
}
.iconicon-test32:before {
content: "\e655";
}
.iconicon-test33:before {
content: "\e656";
}
.iconicon-test34:before {
content: "\e657";
}
.iconicon-test35:before {
content: "\e658";
}
.iconicon-test36:before {
content: "\e659";
}
.iconicon-test37:before {
content: "\e65a";
}
.iconicon-test38:before {
content: "\e65b";
}
.iconicon-test39:before {
content: "\e65c";
}
.iconicon-test40:before {
content: "\e65d";
}
.iconicon-test41:before {
content: "\e65e";
}
.iconicon-test42:before {
content: "\e65f";
}
.iconicon-test43:before {
content: "\e660";
}
.iconicon-test44:before {
content: "\e661";
}
.iconicon-test45:before {
content: "\e662";
}
.iconicon-test46:before {
content: "\e663";
}
.iconicon-test47:before {
content: "\e664";
}
.iconicon-test48:before {
content: "\e665";
}
.iconicon-test49:before {
content: "\e666";
}
.iconicon-test50:before {
content: "\e667";
}
.iconicon-test51:before {
content: "\e668";
}
......
......@@ -80,3 +80,33 @@
background-color: transparent;
border: 0;
}
// 超过多少行自动省略 默认一行
@mixin ellipsis($line:1) {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;
}
@mixin btc($width, $height) {
width: $width;
height: $height;
line-height: $height;
text-align: center;
}
// 通用按钮
@mixin cb($width:320px, $height:84px, $fontSize:32px) {
color: #FFFFFF;
position: relative;
width: $width;
height: $height;
line-height: $height;
text-align: center;
font-size: $fontSize;
border-radius: 8px;
background-color: #3680EB;
}
......
......@@ -44,3 +44,21 @@
.linear {
background-image: linear-gradient(to right, #1bade8, #3680EB);
}
.cScreenWidth {
width: $screenWidth;
}
.cTitle {
font-size: $titleSize;
font-weight: bold;
}
.cFontGray {
color: $fontGray;
}
.cPageBottom {
padding-bottom: $pageBottom;
}
......
......@@ -40,5 +40,9 @@ $fontSizeSmaller: 24px;
$fontSizeLarge: 36px;
$fontSizeLarger: 44px;
$pageBottom: 80px;
$contentWidth: 690px; //内容宽度
$screenWidth: 750px; // 屏幕宽度
$titleSize:32px;
$fontGray:#b7b7b7;
......