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
Expand all
Inline Side-by-side
Showing 28 changed files with 896 additions and 163 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,16 +8,15 @@
<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 -->
</body>
</html>
\ No newline at end of file
</html>
......
<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,
......
import api from '../../api/api'
import {
httpGet,
httpPost
httpGet,
httpPost
} from '../../api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
data() {
return {
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() {
},
components: {},
methods: {
initData() {}
onContactUsHandler() {
},
mounted() {},
created() {
console.log("demo created");
}
}
\ No newline at end of file
onNavHandler(index, title) {
// document.getElementById("scroll" + index).scrollIntoView({
// behavior: "smooth",
// });
},
initData() {}
},
mounted() {},
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
import api from '../../api/api'
import {
httpGet,
httpPost
httpGet,
httpPost
} from '../../api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
data() {
return {
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",
});
},
components: {},
methods: {
initData() {}
toTop() {
document.getElementById("scroll0").scrollIntoView({
behavior: "smooth",
});
},
mounted() {},
created() {
console.log("demo created");
}
}
\ No newline at end of file
toShopDetail(){
this.$router.push({
path:"/shop/detail"
})
},
initData() {}
},
mounted() {},
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");
}
}
\ No newline at end of file
}
......
@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'),
......@@ -47,4 +71,4 @@ router.beforeEach((to, from, next) => {
next();
});
export default router;
\ No newline at end of file
export default router;
......
......@@ -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;
}
......
.bis {
background-repeat: no-repeat;
background-size: 100% 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
//flex 布局和 子元素 对其方式
.fl {
display: flex;
display: flex;
}
.fj {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.fje {
display: flex;
justify-content: flex-end;
display: flex;
justify-content: flex-end;
}
//水平和垂直居中
.fcc {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
// 为元素设定的宽度和高度决定了元素的边框盒。
.bb {
box-sizing: border-box;
box-sizing: border-box;
}
// 满屏
.fullp {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.shadow {
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
border-radius: 8px;
box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
border-radius: 8px;
}
.linear {
background-image: linear-gradient(to right, #1bade8, #3680EB);
}
\ No newline at end of file
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;
......