Skip to content

V
vue-ssr-mobile
Commit a0b1923b authored by lixy's avatar lixy
Browse files
Options

车型、旅游、营地、底部样式优化

parent 96d13733
Show whitespace changes
Inline Side-by-side
Showing with 605 additions and 6000 deletions
assets/styles/base.scss
View file @ a0b1923b
...@@ -106,7 +106,7 @@ input[disabled] { ...@@ -106,7 +106,7 @@ input[disabled] {
} }
.main-padding{ .main-padding{
padding: 0.7rem 0.4rem; padding: 0.7rem 0.4rem 0 0.4rem;
} }
.ft-15{ .ft-15{
font-size: 15px; font-size: 15px;
......
components/footer.vue
View file @ a0b1923b
<template> <template>
<div> <div style="background: #F8F8F8;">
<div class="flex-aic-jcb"> <div class="more-way-title">
<div style="width: 30%;"> 关注·了解更多资讯
</div>
<div class="flex-aic-jcb more-way">
<div
class="erweima-item">
<img <img
style="padding: 10px"
src="../assets/images/xxgzh.jpg"> src="../assets/images/xxgzh.jpg">
<div class="tc">欣新房车</div> <div class="tc">欣新房车</div>
<div class="tc">微信公众号</div> <div class="tc">微信公众号</div>
</div> </div>
<div style="width: 30%;"> <div class="erweima-item">
<img <img
style="padding: 10px"
src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png"> src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png">
<div class="tc">滴房车APP</div> <div class="tc">滴房车APP</div>
<div class="tc">(安卓)</div> <div class="tc">(安卓)</div>
</div> </div>
<div style="width: 30%;"> <div class="erweima-item">
<img <img
style="padding: 10px"
src="../assets/images/xxfczs.jpg"> src="../assets/images/xxfczs.jpg">
<div class="tc">欣新房车</div> <div class="tc">欣新房车</div>
<div class="tc">助手小程序</div> <div class="tc">助手小程序</div>
...@@ -73,6 +80,26 @@ ...@@ -73,6 +80,26 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/styles/mixin"; @import "../assets/styles/mixin";
.more-way {
padding: 10px;
}
.more-way-title{
padding-top: 20px;
font-size: 16px;
text-align: center;
font-weight: bold;
}
.erweima-item{
width: 110px;
margin-bottom: 10px;
border-radius: 3px;
padding-bottom: 30px;
box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
div{
color: #999;
font-size: 14px;
}
}
.footer-container{ .footer-container{
padding: 17px 0 13px 0; padding: 17px 0 13px 0;
background: #16192C; background: #16192C;
......
components/ratingStar.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="rating_container">
<section class="star_container">
<svg
v-for="num in 5"
:key="num"
class="grey_fill">
<svg
id="star"
viewBox="0 0 32 32"
width="100%"
height="100%">
<path
d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z"
class="path1"/>
</svg>
</svg>
</section>
<div
:style="'width:' + rating*2/5 + 'rem'"
class="star_overflow">
<section class="star_container">
<svg
v-for="num in 5"
:key="num"
class="orange_fill">
<svg
id="star"
viewBox="0 0 32 32"
width="100%"
height="100%">
<path
d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z"
class="path1"/>
</svg>
</svg>
</section>
</div>
</div>
</template>
<script>
export default {
props: ["rating"]
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin";
.rating_container {
position: relative;
top: 0.1rem;
@include wh(2rem, 0.4rem);
.star_overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.star_container {
position: absolute;
display: flex;
width: 2rem;
height: 0.4rem;
top: -0.02rem;
left: -0.02rem;
.grey_fill {
fill: #d1d1d1;
}
.orange_fill {
fill: #f8ce46;
}
}
}
</style>
components/shopList.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shoplist_container">
<ul
v-if="shopListArr.length"
type="1">
<router-link
v-for="item in shopListArr"
:to="{ path: 'shop', query:{geohash, id: item.id }}"
:key="item.id"
class="shop_li">
<section>
<img
:src="item.image_path"
class="shop_img">
</section>
<hgroup class="shop_right">
<header class="shop_detail_header">
<h4
:class="item.is_premium? 'premium': ''"
class="shop_title ellipsis">{{ item.name }}</h4>
</header>
</hgroup>
</router-link>
</ul>
<p
v-if="touchend"
class="empty_data">没有更多了</p>
<aside
v-if="showBackStatus"
class="return_top"
@click="backTop">
<svg class="back_top_svg">
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#backtop"/>
</svg>
</aside>
<div
ref="abc"
style="background-color: red;"/>
</div>
</template>
<script>
import ratingStar from "./ratingStar";
import config from "~/config";
import {
restaurants
} from "~/assets/services/shopping";
export default {
components: {
ratingStar
},
props: [
"restaurantCategoryId",
"restaurantCategoryIds",
"sortByType",
"deliveryMode",
"supportIds",
"confirmSelect",
"geohash"
],
data() {
return {
offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
shopListArr: [], // 店铺列表数据
preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
showBackStatus: false, //显示返回顶部按钮
touchend: false //没有更多数据
};
},
watch: {
//监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
restaurantCategoryIds: function (value) {
this.listenPropChange();
},
//监听父级传来的排序方式
sortByType: function (value) {
this.listenPropChange();
},
//监听父级的确认按钮是否被点击，并且返回一个自定义事件通知父级，已经接收到数据，此时父级才可以清除已选状态
confirmSelect: function (value) {
this.listenPropChange();
}
},
mounted() {
this.initData();
},
methods: {
async initData() {
//获取数据
let res = await restaurants();
res.data.map(item => {
item.image_path = config.IMG_URL + item.image_path;
});
this.shopListArr = [...res.data];
if (res.data.length < 20) {
this.touchend = true;
}
},
//到达底部加载更多数据
async loaderMore() {
if (this.touchend) {
return;
}
//防止重复请求
if (this.preventRepeatReuqest) {
return;
}
this.preventRepeatReuqest = true;
//数据的定位加20位
this.offset += 20;
let res = await shopList(
this.latitude,
this.longitude,
this.offset,
this.restaurantCategoryId
);
this.shopListArr = [...this.shopListArr, ...res];
//当获取数据小于20，说明没有更多数据，不需要再次请求数据
if (res.length < 20) {
this.touchend = true;
return;
}
this.preventRepeatReuqest = false;
},
//返回顶部
backTop() {
animate(document.body, {
scrollTop: "0"
}, 400, "ease-out");
},
//监听父级传来的数据发生变化时，触发此函数重新根据属性值获取数据
async listenPropChange() {
this.offset = 0;
let res = await shopList(
this.latitude,
this.longitude,
this.offset,
"",
this.restaurantCategoryIds,
this.sortByType,
this.deliveryMode,
this.supportIds
);
this.hideLoading();
//考虑到本地模拟数据是引用类型，所以返回一个新的数组
this.shopListArr = [...res];
},
zhunshi(supports) {
let zhunStatus;
if (supports instanceof Array && supports.length) {
supports.forEach(item => {
if (item.icon_name === "准") {
zhunStatus = true;
}
});
} else {
zhunStatus = false;
}
return zhunStatus;
}
},
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin";
.shoplist_container {
background-color: #fff;
}
.shop_li {
display: flex;
border-bottom: 0.025rem solid #f1f1f1;
padding: 0.7rem 0.4rem;
}
.shop_img {
@include wh(2.7rem, 2.7rem);
display: block;
margin-right: 0.4rem;
}
.list_back_li {
height: 4.85rem;
.list_back_svg {
@include wh(100%, 100%);
}
}
.shop_right {
flex: auto;
.shop_detail_header {
@include fj;
align-items: center;
.shop_title {
width: 8.5rem;
color: #333;
padding-top: 0.01rem;
@include font(0.65rem, 0.65rem, "PingFangSC-Regular");
font-weight: 700;
}
.premium::before {
content: "品牌";
display: inline-block;
font-size: 0.5rem;
line-height: 0.6rem;
color: #333;
background-color: #ffd930;
padding: 0 0.1rem;
border-radius: 0.1rem;
margin-right: 0.2rem;
}
.shop_detail_ul {
display: flex;
transform: scale(0.8);
margin-right: -0.3rem;
.supports {
@include sc(0.5rem, #999);
border: 0.025rem solid #f1f1f1;
padding: 0 0.04rem;
border-radius: 0.08rem;
margin-left: 0.05rem;
}
}
}
.rating_order_num {
@include fj(space-between);
height: 0.6rem;
margin-top: 0.52rem;
.rating_order_num_left {
@include fj(flex-start);
.rating_section {
display: flex;
.rating_num {
@include sc(0.4rem, #ff6000);
margin: 0 0.2rem;
}
}
.order_section {
transform: scale(0.8);
margin-left: -0.2rem;
@include sc(0.4rem, #666);
}
}
.rating_order_num_right {
display: flex;
align-items: center;
transform: scale(0.7);
min-width: 5rem;
justify-content: flex-end;
margin-right: -0.8rem;
.delivery_style {
font-size: 0.4rem;
padding: 0.04rem 0.08rem 0;
border-radius: 0.08rem;
margin-left: 0.08rem;
border: 1px;
}
.delivery_left {
color: #fff;
background-color: $blue;
border: 0.025rem solid $blue;
}
.delivery_right {
color: $blue;
border: 0.025rem solid $blue;
}
}
}
.fee_distance {
margin-top: 0.52rem;
@include fj;
@include sc(0.5rem, #333);
.fee {
transform: scale(0.9);
@include sc(0.5rem, #666);
}
.distance_time {
transform: scale(0.9);
span {
color: #999;
}
.order_time {
color: $blue;
}
.segmentation {
color: #ccc;
}
}
}
}
.loader_more {
@include font(0.6rem, 3);
text-align: center;
color: #999;
}
.empty_data {
@include sc(0.5rem, #666);
text-align: center;
line-height: 2rem;
}
.return_top {
position: fixed;
bottom: 3rem;
right: 1rem;
.back_top_svg {
@include wh(2rem, 2rem);
}
}
.loading-enter-active,
.loading-leave-active {
transition: opacity 1s;
}
.loading-enter,
.loading-leave-active {
opacity: 0;
}
</style>
components/svg.vue deleted 100644 → 0
View file @ 96d13733
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="position:absolute;width:0;height:0;visibility:hidden">
<defs>
<symbol
id="eleme"
viewBox="0 0 60 60">
<path
fill="#3CABFF"
fill-rule="evenodd"
d="M0 9.375A9.374 9.374 0 0 1 9.375 0h41.25A9.374 9.374 0 0 1 60 9.375v41.25A9.374 9.374 0 0 1 50.625 60H9.375A9.374 9.374 0 0 1 0 50.625V9.375zm35.94 30.204c-5.601 3.147-12.645 1.256-15.834-4.217-3.206-5.501-1.303-12.537 4.25-15.713 4.7-2.689 10.51-1.749 14.127 1.941L27.526 27.89a2.81 2.81 0 0 0-1.037 3.854 2.862 2.862 0 0 0 3.887 1.035l15.988-9.166a17.238 17.238 0 0 0-1.222-2.571c-4.777-8.198-15.358-11.007-23.632-6.275-8.275 4.734-11.11 15.217-6.332 23.415 4.77 8.184 15.322 10.997 23.59 6.297.877-.5 1.654-1.037 2.376-1.623l-1.31-2.248a2.868 2.868 0 0 0-3.893-1.028zm10.824-7.39l-1.418-2.425-4.911 2.798 2.835 4.846 2.454-1.399h.002a2.779 2.779 0 0 0 1.038-3.82z"/>
</symbol>
<symbol
id="user"
viewBox="0 0 28 33">
<path
fill-rule="evenodd"
d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z"
class="path1"/>
</symbol>
<symbol
id="shop"
viewBox="0 0 32 31">
<g fill-rule="evenodd">
<path d="M28.232 1.822C27.905.728 26.97.152 25.759.152H5.588c-1.252 0-1.867.411-2.397 1.415l-.101.243-.443 1.434-.975 3.154-.002.007C.837 9.101.294 10.854.26 10.956l-.059.259c-.231 1.787.337 3.349 1.59 4.448 1.159 1.017 2.545 1.384 3.865 1.384.07 0 .07 0 .132-.002-.01.001-.01.001.061.002 1.32 0 2.706-.367 3.865-1.384a4.96 4.96 0 0 0 .413-.407l-1.043-.946-1.056.931c1.033 1.171 2.51 1.792 4.21 1.801.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.148-.13.287-.267.418-.411l-1.044-.944-1.057.93c1.033 1.174 2.511 1.796 4.213 1.806.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.15-.131.29-.27.422-.416l-1.046-.943-1.058.929c1.033 1.177 2.513 1.801 4.218 1.811.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384 1.206-1.058 1.858-2.812 1.676-4.426-.069-.61-.535-2.207-1.354-4.785l-.109-.342a327.554 327.554 0 0 0-1.295-3.966l-.122-.366.014.043h.004zm-2.684.85l.12.361.318.962c.329.999.658 2.011.965 2.973l.108.338c.719 2.262 1.203 3.92 1.24 4.249.08.711-.233 1.553-.735 1.993-.553.485-1.308.685-2.008.685l-.098-.002c-.987-.007-1.695-.306-2.177-.854l-1.044-1.189-1.06 1.175a2.192 2.192 0 0 1-.188.185c-.553.485-1.308.685-2.008.685l-.098-.002c-.985-.007-1.693-.305-2.174-.852l-1.043-1.185-1.059 1.171c-.058.064-.12.125-.186.183-.553.485-1.308.685-2.008.685l-.098-.002c-.984-.007-1.692-.304-2.173-.85L9.101 12.2l-1.058 1.166a2.248 2.248 0 0 1-.184.181c-.553.485-1.307.685-2.008.685l-.061-.001-.131.001c-.701 0-1.455-.2-2.008-.685-.538-.472-.767-1.102-.654-1.971l-1.396-.18 1.338.44c.043-.13.552-1.775 1.425-4.599l.002-.007.975-3.155.443-1.434-1.345-.415 1.245.658c.054-.102.042-.085-.083-.001-.122.082-.143.086-.009.086H25.763c.053 0-.164-.133-.225-.339l.014.043-.004-.001zM5.528 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z"/>
<path d="M.28 29.72c0-.707.58-1.28 1.277-1.28h28.155a1.28 1.28 0 0 1 .007 2.56H1.561A1.278 1.278 0 0 1 .28 29.72z"/>
<path d="M26.008 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z"/>
</g>
</symbol>
<symbol
id="location"
viewBox="0 0 28 33">
<g fill-rule="evenodd">
<path
d="M20.809 21.6L12.9 29.509h1.616l-7.992-7.992a13.003 13.003 0 0 1-.506-.478c-4.25-4.25-4.25-11.14 0-15.389s11.14-4.25 15.389 0c4.25 4.25 4.25 11.14 0 15.389a10.81 10.81 0 0 1-.543.508l-.056.052zm1.56 1.669c.225-.196.443-.401.656-.613 5.142-5.142 5.142-13.48 0-18.622s-13.48-5.142-18.622 0c-5.142 5.142-5.142 13.48 0 18.622.18.18.364.354.553.522l8.753 8.755 8.661-8.664z"
class="path1"/>
<path
d="M9.428 16.739a6.063 6.063 0 1 0 8.573-8.575 6.063 6.063 0 0 0-8.573 8.575zm1.616-1.616a3.776 3.776 0 1 1 5.34-5.341 3.776 3.776 0 0 1-5.34 5.341z"
class="path2"/>
</g>
</symbol>
<symbol
id="star"
viewBox="0 0 32 32">
<path
class="path1"
d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z"/>
</symbol>
<symbol
id="backtop"
viewBox="0 0 32 32">
<g fill-rule="evenodd">
<circle
cx="16"
cy="16"
r="15"
stroke="#999"
stroke-width="0.6"
fill="none" />
<line
x1="16"
y1="10"
x2="16"
y2="21"
style="stroke:#999;stroke-width:0.8" />
<line
x1="10"
y1="10"
x2="22"
y2="10"
style="stroke:#999;stroke-width:0.8" />
<path
d="M9.5 18 L16 10 L22.5 18"
style="stroke:#999;stroke-width:0.8;fill:none" />
<text
x="10"
y="27"
style="font-size:6px;fill:#999;font-weight:700;">顶部</text>
</g>
</symbol>
<symbol
id="default"
viewBox="0 0 33 32">
<path
fill="#3b87c8"
d="M13.374 29.064a.94.94 0 0 1-.941-.941V6.476l-7.285 6.899a.942.942 0 0 1-1.299-1.364l8.876-8.424a.94.94 0 0 1 1.59.681v23.855a.94.94 0 0 1-.941.941zM20.904 29.355h-.008a.94.94 0 0 1-.375-.078.943.943 0 0 1-.559-.86V3.944a.94.94 0 1 1 1.882 0v22.287l7.238-6.842a.94.94 0 0 1 1.289 1.366l-8.818 8.338a.943.943 0 0 1-.649.264z"/>
</symbol>
<symbol
id="distance"
viewBox="0 0 32 32">
<path
fill="#2a9bd3"
d="M15.884 31.236l-.042.001a.888.888 0 0 1-.59-.224l-7.91-7.91a7.548 7.548 0 0 1-.498-.471 12.752 12.752 0 0 1-3.747-9.045C3.097 6.523 8.824.796 15.888.796s12.791 5.727 12.791 12.791c0 3.532-1.432 6.73-3.747 9.045-.196.196-.409.391-.613.578l-7.813 7.804a.886.886 0 0 1-.589.223l-.035-.001zm0-28.667C9.818 2.59 4.908 7.513 4.908 13.582c0 3.023 1.218 5.762 3.19 7.752l.461.435 7.316 7.316 7.2-7.2q.284-.249.551-.516a10.977 10.977 0 0 0 3.225-7.787c0-6.066-4.905-10.987-10.965-11.013z"/>
<path
fill="#2a9bd3"
d="M15.884 18.524a5.707 5.707 0 0 1-4.07-1.732l-.001-.001a5.76 5.76 0 1 1 4.119 1.734h-.05zm-2.817-2.942a3.982 3.982 0 1 0 0-5.626c-.726.717-1.175 1.713-1.175 2.813s.449 2.096 1.175 2.813z"/>
</symbol>
<symbol
id="fengniao"
viewBox="0 0 32 32">
<path
fill="#27a9e1"
d="M5.953 2.793s-.117 1.801.857 3.56c.361.255 10.458 6.218 10.458 6.218L5.953 2.794z"/>
<path
fill="#b8e5fa"
d="M9.604.889s-.333 1.404.069 3.147c.254.307 7.801 8.116 7.801 8.116L9.604.889z"/>
<path
fill="#0089cf"
d="M29.282 14.601l-4.861-.361s-.133-.001-.147-.226h-.002a2.652 2.652 0 0 0-2.978-2.357h-.003l-.011.001-.12.019-.004.001c-.432.075-1.812.374-3.038 1.285 0 0-.167.121-.421.33L2.665 6.043s3.254 8.665 12.207 11.98c-1.6 2.849-7.407 13.48-7.407 13.48l2.446-1.306s.775-2.853 1.884-4.957c.609-.936 1.211-.992 1.498-1.141.291-.151 3.707-.765 6.431-4.339.897-1.166 1.244-2.666 1.723-4.261.28-.061 3.008-.651 3.789-.718 1.068-.092 4.045-.181 4.045-.181z"/>
<path
fill="#0089cf"
d="M7.392 17.849c-1.567-1.368-2.199-3.219-2.035-5.217-.232-.288-.45-.572-.654-.851-.484 2.903.555 4.854 2.176 6.269 1.538 1.342 3.635 1.85 5.466 1.577-1.674.109-3.563-.565-4.953-1.778z"/>
<path
fill="#0089cf"
d="M12.345 19.628h.002zm-7.642-7.846c.204.279.421.563.654.851-.164 1.998.468 3.849 2.035 5.217 1.292 1.128 3.016 1.79 4.597 1.79.12 0 .238-.004.356-.011a6.554 6.554 0 0 1-.975.071c-1.568 0-3.22-.54-4.49-1.648-1.621-1.415-2.66-3.366-2.176-6.269z"/>
</symbol>
<symbol
id="hot"
viewBox="0 0 23 32">
<path
fill="#f07373"
d="M9.859 29.375c-3.489-.771-6.362-3.097-7.187-5.551-.882-2.623-1.029-6.873-.238-9.318l-1.727.037.001.002.001.004.004.01.011.029.038.091c.039.09.086.191.142.3.155.304.349.627.586.955a7.477 7.477 0 0 0 2.711 2.318c.583.153.583.153 1.087-.188.187-.263.187-.263.224-.39.028-.094.041-.176.05-.28.01-.109.016-.238.022-.47.063-2.219.162-3.38.562-4.943a10.05 10.05 0 0 1 .814-2.185c1.433-2.723 4.843-6.053 6.699-7.021l-1.325-.962c-.064.382-.127.992-.131 1.722-.008 1.252.169 2.393.616 3.329.261.547.525.968 1.132 1.862l.23.339c.86 1.281 1.161 1.986 1.069 2.653l-.009.125c.069.517.069.517.781.906.451-.026.451-.026.578-.104.144-.093.144-.093.19-.136.041-.037.079-.077.123-.125.068-.076.153-.178.245-.295.22-.279.458-.615.677-.963.648-1.028 1.045-1.988 1.037-2.845l-.914.009-.706.581c.295.358.809 1.075 1.33 1.936.826 1.363 1.492 2.791 1.898 4.209 1.1 3.845.3 9.288-2.245 11.75a9.652 9.652 0 0 1-1.659 1.29 10.232 10.232 0 0 1-3.471 1.332c-.794.151-1.385.191-2.064.191h-.009a2.75 2.75 0 0 1-.373-.03 6.007 6.007 0 0 1-.585-.115 7.765 7.765 0 0 1-.536-.15l-.578 1.735a9.182 9.182 0 0 0 1.445.341c.221.031.43.048.627.048h.009a12.546 12.546 0 0 0 2.407-.224 12.011 12.011 0 0 0 4.088-1.572c.699-.431 1.358-.94 1.971-1.533 3.098-2.998 4-9.132 2.731-13.567-.455-1.591-1.188-3.161-2.092-4.653-.569-.939-1.134-1.727-1.482-2.15l-1.645-1.998.024 2.588c.004.412-.281 1.1-.756 1.853a9.64 9.64 0 0 1-.569.809 4.528 4.528 0 0 1-.158.195c.028-.027.028-.027.16-.113.122-.075.122-.075.57-.101.71.388.71.388.778.902h-.914l.906.125c.174-1.262-.261-2.281-1.362-3.922l-.235-.347c-.554-.817-.787-1.189-.995-1.624-.306-.642-.444-1.53-.438-2.53a10.566 10.566 0 0 1 .107-1.431L14.44.304l-1.628.85c-2.18 1.138-5.862 4.733-7.471 7.791a11.873 11.873 0 0 0-.967 2.583 19.2 19.2 0 0 0-.511 3.147c-.036.423-.061.839-.079 1.273-.011.281-.019.531-.029.924-.005.191-.01.298-.015.354a.403.403 0 0 1 .019-.077c.027-.099.027-.099.203-.346.492-.332.492-.332 1.112-.157a5.745 5.745 0 0 1-2.54-2.496 3.456 3.456 0 0 1-.093-.197l-.018-.044-.002-.006v.001l.001.002v.002l-.915-2.473-.812 2.51c-.917 2.836-.757 7.485.245 10.463 1.042 3.099 4.442 5.852 8.526 6.754l.395-1.785z"/>
</symbol>
<symbol
id="price"
viewBox="0 0 32 32">
<path
fill="#e6b61a"
d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"/>
<path
fill="#e6b61a"
d="M23.14 6.06l-5.12 8.65h4.48v1.54h-5.49v2.43h5.49v1.54h-5.49v5.1h-2.02v-5.1H9.53v-1.54h5.46v-2.43H9.53v-1.54h4.45L8.8 6.06h2.24l4.99 8.48 4.93-8.48h2.18z"/>
</symbol>
<symbol
id="rating"
viewBox="0 0 33 32">
<path
fill="#eba53b"
d="M27.087 31.84L16.8 25.553 6.504 31.84l2.824-11.727-9.186-7.878 12.019-.941L16.801.16l4.631 11.134 12.019.941-9.158 7.849zM16.8 23.369l7.407 4.527-2.014-8.471 6.588-5.647-8.659-.696L16.8 5.063l-3.341 8.019-8.659.696 6.588 5.647-2.014 8.471z"/>
</symbol>
<symbol
id="selected"
viewBox="0 0 38 32">
<path
fill="#3190e8"
d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"/>
</symbol>
<symbol
id="speed"
viewBox="0 0 32 32">
<path
fill="#37c7b7"
d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"/>
<path
fill="#37c7b7"
d="M15 7v11.002l5.678 4.882 1.304-1.517-5.33-4.583.348.758V6.999h-2z"/>
</symbol>
<symbol
id="cart-minus"
viewBox="0 0 50 50">
<path
fill-rule="evenodd"
stroke-width="4"
d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z"
clip-rule="evenodd"/>
<path
fill-rule="evenodd"
d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z"
clip-rule="evenodd"/>
</symbol>
<symbol
id="cart-add"
viewBox="0 0 50 50">
<path
fill="none"
d="M0 0h44v44H0z"/>
<path
fill-rule="evenodd"
d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z"
clip-rule="evenodd"/>
</symbol>
<symbol
id="cart-remove"
viewBox="0 0 24 32">
<path
fill="#bbb"
fill-rule="evenodd"
d="M21.5 10h-19c-1.1 0-1.918.896-1.819 1.992l1.638 18.016C2.419 31.104 3.4 32 4.5 32h15c1.1 0 2.081-.896 2.182-1.992l1.637-18.016A1.798 1.798 0 0 0 21.5 10zM8 28H5L4 14h4v14zm6 0h-4V14h4v14zm5 0h-3V14h4l-1 14zm2-24h-2.941l-.353-2.514C17.592.669 16.823 0 15.998 0H8c-.825 0-1.593.668-1.708 1.486L5.94 4H3a3 3 0 0 0-3 3v1h24V7a3 3 0 0 0-3-3zM8.24 2h7.52l.279 2H7.96l.28-2z"/>
</symbol>
<symbol
id="cart"
viewBox="0 0 14 16">
<path
fill="#FFF"
fill-rule="evenodd"
d="M12.364 2.998H2.088L1.816.687a.455.455 0 0 0-.478-.431L.431.303A.454.454 0 0 0 0 .78l1.256 10.893c.006.293.011 1.325.933 1.325h9.546a.455.455 0 0 0 .455-.454v-.881a.454.454 0 0 0-.455-.455H3.05l-.11-.937h8.606c.998 0 1.889-.724 1.989-1.616l.455-4.04c.1-.893-.628-1.617-1.626-1.617zm-.45 4.245c-.075.669-.317 1.212-1.066 1.212H2.727L2.3 4.812h8.821c.749 0 1.065.543.99 1.212l-.197 1.219zM2.416 15.79a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9.092 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</symbol>
<symbol
id="cart-icon"
viewBox="0 0 58 58">
<defs>
<filter
id="a"
width="200%"
height="200%"
x="-50%"
y="-50%"
filterUnits="objectBoundingBox">
<feOffset
in="SourceAlpha"
result="shadowOffsetOuter1" />
<feGaussianBlur
stdDeviation="1.5"
in="shadowOffsetOuter1"
result="shadowBlurOuter1" />
<feColorMatrix
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
in="shadowBlurOuter1"
result="shadowMatrixOuter1" />
<feMerge>
<feMergeNode in="shadowMatrixOuter1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<path
id="b"
d="M7.614 4.051c-1.066.086-1.452-.398-1.752-1.584C5.562 1.28.33 5.88.33 5.88l3.71 19.476c0 .148-1.56 7.515-1.56 7.515-.489 2.19.292 4.27 3.56 4.32 0 0 36.917.017 36.92.047 1.979-.012 2.981-.995 3.013-3.039.03-2.043-1.045-2.978-2.987-2.993L8.83 31.192s.86-3.865 1.077-3.865c0 0-5.788.122 32.065-1.956.606-.033 2.018-.764 2.298-1.848 1.113-4.317 4.008-13.26 4.458-15.64.932-4.925 2.061-8.558-4.28-7.405 0 0-35.768 3.487-36.833 3.573z" />
</defs>
<g
fill="none"
fill-rule="evenodd"
filter="url(#a)"
transform="translate(3 2)">
<g transform="translate(5.038 7.808)">
<mask
id="c"
fill="#fff">
<use xlink:href="#b" />
</mask>
<use
fill="#FFF"
xlink:href="#b" />
<path
fill="#2073C1"
d="M53.962 7.774l-5.701 19.305-40.78 1.574z"
opacity=".1"
mask="url(#c)" />
</g>
<path
stroke="#FFF"
stroke-width="6"
d="M9.374 18.722S7.868 11.283 7.323 8.71C6.778 6.136 5.86 5.33 3.978 4.52 2.096 3.713.367 2.286.367 2.286"
stroke-linecap="round" />
<circle
cx="46"
cy="51"
r="4"
fill="#FFF" />
<circle
cx="12"
cy="51"
r="4"
fill="#FFF" />
</g>
</symbol>
<symbol
id="arrow-left"
viewBox="0 0 14 14">
<path
d="M0 0 L8 7 L0 14"
stroke="#fff"
stroke-width="1"
fill="none" />
</symbol>
<symbol
id="res-well"
viewBox="0 0 1024 1024">
<path
fill="#7ED321"
fill-rule="evenodd"
d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0zM247.808 402.432c0-36.864 39.936-93.184 93.184-93.184s93.184 56.32 93.184 93.184c0 11.264-9.216 20.48-20.48 20.48-11.264 0-20.48-9.216-20.48-20.48 0-16.384-24.576-52.224-52.224-52.224-27.648 0-52.224 35.84-52.224 52.224 0 11.264-9.216 20.48-20.48 20.48-11.264 0-20.48-9.216-20.48-20.48zM512 800.768c-132.096 0-239.616-96.256-239.616-215.04 0-11.264 9.216-20.48 20.48-20.48 11.264 0 20.48 9.216 20.48 20.48 0 96.256 89.088 174.08 198.656 174.08 109.568 0 198.656-77.824 198.656-174.08 0-11.264 9.216-20.48 20.48-20.48 11.264 0 20.48 9.216 20.48 20.48 0 117.76-107.52 215.04-239.616 215.04zm243.712-377.856c-11.264 0-20.48-9.216-20.48-20.48 0-17.408-24.576-52.224-52.224-52.224-28.672 0-52.224 34.816-52.224 52.224 0 11.264-9.216 20.48-20.48 20.48-11.264 0-20.48-9.216-20.48-20.48 0-36.864 39.936-93.184 93.184-93.184s93.184 56.32 93.184 93.184c0 11.264-9.216 20.48-20.48 20.48z"/>
</symbol>
<symbol
id="res-bad"
viewBox="0 0 1024 1024">
<path
fill="#D0021B"
fill-rule="evenodd"
d="M512 0C230.326 0 0 230.326 0 512s230.573 512 512 512 512-230.326 512-512S793.674 0 512 0zM240.694 373.755l158.735-56.285 15.306 46.164L256 419.919l-15.306-46.164zm440.409 384.123c-10.122 0-20.49-10.122-25.674-20.49-10.122-10.122-61.47-25.674-148.366-25.674-86.896 0-138.245 15.306-148.366 25.674 0 10.122-10.122 20.49-25.674 20.49s-25.674-10.122-25.674-25.674c0-71.591 174.041-71.591 194.53-71.591 20.489 0 194.53 0 194.53 71.591 10.122 10.368 0 25.674-15.306 25.674zM768 419.919l-163.672-61.47 15.306-46.164 158.735 56.285-10.368 51.348-.001.001z"/>
</symbol>
<symbol
id="avatar-default"
viewBox="0 0 122 122">
<path
fill="#DCDCDC"
fill-rule="evenodd"
d="M61 121.5c33.413 0 60.5-27.087 60.5-60.5S94.413.5 61 .5.5 27.587.5 61s27.087 60.5 60.5 60.5zm12.526-45.806c-.019 3.316-.108 6.052.237 9.825 3.286 8.749 18.816 9.407 28.468 17.891-1.833 1.998-6.768 6.788-15 10.848-7.02 3.463-16.838 6.416-24.831 6.416-17.366 0-32.764-7.149-42.919-17.264 9.713-8.407 25.49-9.173 28.769-17.891.345-3.773.258-6.509.24-9.825l-.004-.002c-1.903-.985-5.438-7.268-6.01-12.571-1.492-.12-3.843-1.561-4.534-7.247-.37-3.053 1.107-4.77 2.004-5.31-5.046-19.212 1.507-33.16 20.749-34.406 5.753 0 10.18 1.52 11.909 4.523 15.35 2.702 11.756 22.658 9.328 29.882.899.54 2.376 2.258 2.004 5.31-.689 5.687-3.042 7.127-4.534 7.248-.575 5.305-3.25 10.82-5.873 12.57l-.003.003zM61 120.5C28.14 120.5 1.5 93.86 1.5 61S28.14 1.5 61 1.5s59.5 26.64 59.5 59.5-26.64 59.5-59.5 59.5z"/>
</symbol>
<symbol
id="mobile"
viewBox="0 0 655 1024">
<path d="M0 122.501v778.998C0 968.946 55.189 1024 123.268 1024h408.824c68.52 0 123.268-54.846 123.268-122.501V122.501C655.36 55.054 600.171 0 532.092 0H123.268C54.748 0 0 54.846 0 122.501zM327.68 942.08c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96 40.96 18.338 40.96 40.96-18.338 40.96-40.96 40.96zM81.92 163.84h491.52V819.2H81.92V163.84z"/>
</symbol>
<symbol
id="arrow-right"
viewBox="0 0 1024 1024"
class="icon">
<path
d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z"
class="selected"/>
</symbol>
<symbol
id="order"
viewBox="0 0 40 40">
<path d="M31.5 3h-23C6 3 4 5.1 4 7.7v24.7C4 34.9 6 37 8.5 37h23c2.5 0 4.5-2.1 4.5-4.7V7.7C36 5.1 34 3 31.5 3zM11.8 28.2c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.2-.9 2.1-2 2.1zm0-6.1c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.1-.9 2.1-2 2.1zm0-6.2c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.2-.9 2.1-2 2.1zm5.1 11.9h13.5v-2.6H16.9v2.6zm0-6.5h13.5v-2.6H16.9v2.6zm0-6.6h13.5v-2.6H16.9v2.6z"/>
</symbol>
<symbol
id="point"
viewBox="0 0 40 40">
<path d="M34.6 7.1c0-1.1-1-2.1-2.1-2.1h-24c-1.1 0-2 1-2.1 2.1l-1.6 25C4.6 34.3 6.3 36 8.5 36h24c2.2 0 3.9-1.7 3.7-3.9l-1.6-25zm-5.9 6.1c-.2 4.6-3.7 8.2-8.3 8.2-4.6 0-8.2-3.7-8.4-8.3-.3-.2-.5-.6-.5-1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c0 .5-.3.9-.7 1.1.2 3.8 3.2 6.8 7.1 6.8 3.9 0 6.8-3.1 7-6.9-.4-.2-.6-.6-.6-1.1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c-.2.6-.4 1-.8 1.2z"/>
</symbol>
<symbol
id="vip"
viewBox="0 0 40 40">
<path d="M7 33.4c0 1.1.9 1.6 2 1.6h22c1.1 0 2-.5 2-1.6V31H7v2.4z"/>
<path
d="M32.1 14.3c-.6 2.3-2.6 4-5.1 4-2.9 0-5.3-2.3-5.3-5.2v-.2c-.5.2-1 .3-1.6.3-.6 0-1.1-.1-1.7-.3v.2c0 2.9-2.4 5.2-5.3 5.2-2.5 0-4.6-1.7-5.1-4.1-.5.4-1.2.6-1.8.6-.3 0-.5.1-.8 0L7.2 29h26l1.7-14.2c-.3.1-.5.1-.8.1-.8 0-1.5-.2-2-.6z"
class="st0"/>
<ellipse
cx="20.1"
cy="8.2"
rx="3.2"
ry="3.2"/>
<ellipse
cx="6.4"
cy="10.5"
rx="2.4"
ry="2.4"/>
<ellipse
cx="33.8"
cy="10.5"
rx="2.4"
ry="2.4"/>
</symbol>
<symbol
id="download"
viewBox="0 0 40 40">
<path d="M30 5H10c-2.8 0-5 2.2-5 5v20c0 2.8 2.2 5 5 5h20c2.8 0 5-2.2 5-5V10c0-2.8-2.2-5-5-5zm-3.9 22.7c-.1.2-.3.4-.6.5-4.3 2.8-10.1 1.6-13-2.8-2.8-4.3-1.6-10.2 2.8-13 4.3-2.8 10.2-1.6 13 2.8.2.2.3.5.4.8.1.2 0 .5-.2.7l-8.8 5.7c-.2.2-.6.1-.7-.2l-.5-.7c-.4-.6-.2-1.5.4-1.9l5.6-3.6c.2-.2.3-.5.2-.7l-.1-.1c-2.2-1.8-5.4-2.1-7.9-.4-3.1 2-4 6.1-2 9.2 2 3.1 6.1 4 9.2 2 .6-.4 1.3-.2 1.7.4l.3.7c.1.2.4.5.2.6zm3.1-4.4l-.9.6c-.2.2-.6.1-.7-.2L26.5 22c-.2-.2-.1-.6.2-.7l1.8-1.1c.2-.2.6-.1.7.2l.6.9c.3.6.1 1.5-.6 2z"/>
</symbol>
<symbol
id="service"
viewBox="0 0 40 40">
<g id="service_XMLID_1_">
<path
id="service_XMLID_6_"
d="M32.2 9.5c-.2-.7-.1-.7-.4-.9-1.7-1.2-5.3.2-6.7 1.9-.8-3.8-3.8-6.1-4.7-5.9-.9-.2-4 2.1-4.8 5.9-1.3-1.7-5-3.1-6.7-1.9-.1.1-.5.6-.5.7C5.4 20.7 15 24.6 19 25.7v8.7c0 .7.3 1.2 1 1.2s1-.5 1-1.2v-8.6c4-1 14.2-4.8 11.2-16.3z"/>
<path
id="service_XMLID_7_"
d="M6 25c-.9 0-1.6.7-1.6 1.5.1.8.7 1.5 1.6 1.5 3.1 0 6.5 1.5 8.5 3.7.3.3.7.6 1.1.6.4 0 .7-.1 1-.4.6-.6.6-1.6.1-2.3C14.1 26.8 10 25 6 25z"/>
<path
id="service_XMLID_8_"
d="M34.6 25c-4 0-8.1 1.9-10.7 4.6-.6.6-.5 1.6.1 2.2.3.3.7.4 1 .4.4 0 .8-.3 1.1-.6 2-2.1 5.3-3.7 8.4-3.7h.1c.8 0 1.5-.7 1.5-1.5 0-.7-.7-1.4-1.5-1.4z"/>
</g>
<path
d="M0 0h40v40H0z"
class="st1"/>
</symbol>
<symbol
id="select"
viewBox="0 0 120 120">
<circle
cx="60"
cy="60"
r="60"/>
<path
fill="#FFF"
d="M63.84 84.678a1.976 1.976 0 0 1-.387.545l-7.975 7.976a1.996 1.996 0 0 1-2.829-.005L24.172 64.716a2.005 2.005 0 0 1-.005-2.828l7.976-7.976a1.996 1.996 0 0 1 2.828.005l19.015 19.015L91.498 35.42a1.991 1.991 0 0 1 2.823 0l7.976 7.977c.784.784.78 2.043 0 2.823L63.84 84.678z"/>
</symbol>
<symbol
id="sdk_icon_zhifubao@2x"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 72 72">
<defs>
<path
id="sdk_icon_zhifubao@2x_a"
d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0 0 16.118 0 36s16.118 36 36 36z"/>
</defs>
<g
fill="none"
fill-rule="evenodd">
<mask
id="sdk_icon_zhifubao@2x_b"
fill="#fff">
<use xlink:href="#sdk_icon_zhifubao@2x_a"/>
</mask>
<use
fill="#00A1E9"
xlink:href="#sdk_icon_zhifubao@2x_a"/>
<path
d="M33 21v-5h7v5h14v3H40v4h12c-.202.048-.408 3.223-2 7-1.32 4.134-2.683 6.15-2 6l23.6 8c-.2-.285-.848 2.3-2 4-.775 2.013-2 5-2 5L44 46c.237.162-3.79 4.674-8 7-4.002 1.645-8.717 2.88-14 1-4.93-.56-8.554-3.867-8-10 .693-6.083 7.138-8.19 13-8 4.739-.19 14.796 3.29 15 3-.204.29.642-1.628 2-4 .283-2.015.518-3.777 0-4H22v-3h11v-4H20v-3h13zm-7 30c-7.407 0-9-3.593-9-6 0-2.761 1.576-5.57 8-6 6.484-.383 15.2 4.436 15 4 .2.436-6.238 8-14 8z"
fill="#FFF"
mask="url(#sdk_icon_zhifubao@2x_b)"/>
</g>
</symbol>
<symbol
id="weixin"
viewBox="0 0 72 72">
<g
fill="none"
fill-rule="evenodd">
<path
d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0 0 16.118 0 36s16.118 36 36 36z"
fill="#45C144"/>
<path
d="M29 40l-4-8c-.262-.292-.288-.398 0-1 .594-.228.743-.174 1 0l4 4c1.5 1.098 1.5 1.098 3 0l21-10c-3.668-4.964-10.11-8-17-8-12.33 0-22 8.12-22 18 0 5.6 2.91 10.518 7 14 1 .8 1.068.537 1 1 .068.185-.954 4.042-1 4-.027.316-.097.495 0 1-.097.075.225.4 1 0-.22.4 5-3 5-3 1.4.6 5.8 1 9 1 11.533 0 21.2-7.85 21-18 .2-2.899-.692-5.756-2-8L31 41c-1.5.5-2-1-2-1z"
fill="#FFF"/>
</g>
</symbol>
<symbol
id="human"
viewBox="0 0 46 46">
<path
fill="#ff7b52"
d="M33.291 37.774c-.25.097-.504.175-.765.233-6.427 1.444-5.954-3.968-6-3.953 10.457-5.053 10.348-13.466 10-16.216-16.15-.041-22.943-7.063-22.943-7.063s-.176 1.733-2.933 4.996c-2.756 3.262-5.236 4.09-5.132 4.113.54 13.9 12.246 14.242 12.246 14.242-.762 4.662-4.357 4.33-4.357 4.33s-6.38.213-11.173-7.446c-.85-1.359-1.02-2.864-1.166-4.579-.217-2.542.14-4.643.312-7.2.271-4.064.96-6.269.96-6.269S7.13 0 21.4 0s17.828 12.508 17.828 12.508l-.035.074c.533.763.984 1.997 1.356 3.36A3.483 3.483 0 0 1 45 19.281v7.257a3.484 3.484 0 0 1-3.325 3.472c-2.009 4.537-6.657 12.185-15.241 12.457C26.023 44.485 24.269 46 22.168 46c-2.407 0-4.357-1.988-4.357-4.44 0-2.453 1.95-4.44 4.357-4.44 1.955 0 3.609 1.311 4.16 3.118 1.447.13 4.044-.094 6.963-2.464zM18.216 27.018s.99 3.08 3.705 3.08 3.807-1.875 3.807-2.906c.467-1.135 1.348-.541 1.482-.071.134.47-.763 4.67-5.24 4.67s-5.205-4.358-5.205-4.358.033-.97.702-.97c.669 0 .749.555.749.555zm10.052-2.332c.963 0 1.743-1.192 1.743-2.664 0-1.471-.78-2.664-1.743-2.664-.963 0-1.743 1.193-1.743 2.664 0 1.472.78 2.664 1.743 2.664zm-12.723 0c.962 0 1.743-1.192 1.743-2.664 0-1.471-.78-2.664-1.743-2.664-.963 0-1.743 1.193-1.743 2.664 0 1.472.78 2.664 1.743 2.664z"/>
</symbol>
<symbol
id="phone"
viewBox="0 0 46 46">
<path
fill="#6ac20b"
d="M15.433 30.568c9.342 9.342 17.708 12.15 18.871 12.316 1.163.167 3.07.542 5.837-2.225 3.24-3.24 3.566-4.94 1.783-6.724-1.783-1.783-6.212-4.48-7.416-5.176-1.206-.696-2.228-.472-3.097.133-.868.605-1.87 1.375-2.798 2.047-.927.671-2.087.955-3.332.167-1.245-.79-3.35-2.27-5.735-4.652-2.384-2.384-3.863-4.49-4.651-5.735-.789-1.245-.505-2.405.167-3.332.671-.928 1.441-1.93 2.046-2.798.605-.869.828-1.89.134-3.097-.696-1.204-3.394-5.633-5.177-7.416-1.783-1.783-3.484-1.457-6.724 1.783-2.766 2.766-2.391 4.674-2.226 5.837.167 1.164 2.976 9.53 12.318 18.872"/>
</symbol>
<symbol
id="expired"
viewBox="0 0 126 126">
<path
fill="#9B9B9B"
fill-rule="evenodd"
d="M63 125.5c34.518 0 62.5-27.982 62.5-62.5S97.518.5 63 .5.5 28.482.5 63s27.982 62.5 62.5 62.5zM15.156 66.678l-3.073-1.258 2.868-1.674.248-3.31 2.478 2.21 3.225-.79-1.335 3.04 1.746 2.825-3.302-.33-2.147 2.533-.704-3.245zm4.07-24.55l-2.03-2.625 3.32-.015 1.87-2.744 1.04 3.153 3.187.93-2.677 1.964.1 3.32-2.695-1.94-3.124 1.122 1.01-3.163zm15.8-19.223l-.446-3.29 2.883 1.646 2.99-1.44-.674 3.25 2.294 2.4-3.3.363-1.573 2.924-1.363-3.027-3.267-.592 2.457-2.233zm23.296-8.75l1.258-3.072 1.674 2.868 3.31.248-2.21 2.478.79 3.225-3.04-1.335-2.825 1.746.33-3.302-2.533-2.147 3.245-.704zm24.55 4.072l2.625-2.032.015 3.32 2.744 1.87-3.153 1.04-.93 3.188-1.964-2.677-3.32.1 1.94-2.695-1.122-3.124 3.163 1.01zm27.972 39.095l3.073 1.258-2.868 1.674-.248 3.31-2.478-2.21-3.225.79 1.335-3.04-1.746-2.825 3.302.33 2.147-2.533.704 3.245zm-4.07 24.55l2.03 2.625-3.32.015-1.87 2.744-1.04-3.153-3.187-.93 2.677-1.964-.1-3.32 2.695 1.94 3.124-1.122-1.01 3.163zm-15.8 19.223l.446 3.29-2.883-1.646-2.99 1.44.674-3.25-2.294-2.4 3.3-.363 1.573-2.924 1.363 3.027 3.267.592-2.457 2.233zm-23.296 8.75l-1.258 3.072-1.674-2.868-3.31-.248 2.21-2.478-.79-3.225 3.04 1.335 2.825-1.746-.33 3.302 2.533 2.147-3.245.704zm-24.55-4.072l-2.625 2.032-.015-3.32-2.744-1.87 3.153-1.04.93-3.188 1.964 2.677 3.32-.1-1.94 2.695 1.122 3.124-3.163-1.01zM74.257 41.7a23.764 23.764 0 0 0-22.17.092 23.767 23.767 0 0 0-12.508 18.646l.995.1a22.767 22.767 0 0 1 11.983-17.863 22.764 22.764 0 0 1 21.238-.088l.462-.887zm11.387 22.436A22.764 22.764 0 0 1 74.313 82.1a22.767 22.767 0 0 1-21.5.696l-.44.897a23.767 23.767 0 0 0 22.44-.727A23.764 23.764 0 0 0 86.64 64.214l-.997-.078zM63 122.5C30.14 122.5 3.5 95.86 3.5 63S30.14 3.5 63 3.5s59.5 26.64 59.5 59.5-26.64 59.5-59.5 59.5zm14.127-71.148l1.14 1.975 3.388-1.956-1.14-1.974-3.388 1.956zm2.704-3.14l-1.055-1.83-3.388 1.956 1.056 1.83 3.388-1.957zm.237 8.232l3.388-1.956-1.14-1.974-3.388 1.956 1.14 1.974zm-6.89-8.715a24.73 24.73 0 0 0-.892-1.453 7.288 7.288 0 0 0-.79-.985c.31-.104.617-.227.924-.367a6.52 6.52 0 0 0 .842-.46c.13-.093.226-.12.285-.08.06.04.066.128.017.267a.653.653 0 0 0-.032.378c.03.113.09.253.187.42l.85 1.475 3.39-1.956a39.962 39.962 0 0 0-1.01-1.677c-.25-.383-.472-.665-.67-.847a13.33 13.33 0 0 0 1.857-.767c.19-.09.313-.107.374-.05.062.057.064.148.007.273-.09.2-.128.356-.117.47.01.114.06.247.147.4l.792 1.37c.24-.157.48-.318.718-.483a9.91 9.91 0 0 0 .673-.513l1.02 1.766c-.26.095-.52.204-.78.327-.262.123-.525.243-.79.36l4.655 8.063c.234-.17.46-.333.675-.486.217-.153.43-.318.643-.496l.912 1.58c-.21.085-.434.177-.672.278-.238.1-.534.243-.888.43-.354.185-.79.423-1.307.712a205.733 205.733 0 0 0-3.876 2.238c-.516.307-.943.567-1.28.78-.34.215-.615.402-.828.562-.212.16-.408.31-.586.45l-.912-1.58c.638-.24 1.29-.533 1.958-.882l-4.668-8.085a20.893 20.893 0 0 0-1.67 1.186l-1.02-1.767a21.623 21.623 0 0 0 1.862-.854zm14.762 2.285l3.387-1.956-2.124-3.68-3.388 1.956 2.124 3.68zm-1.45-10.332l-3.387 1.956 1.956 3.387 3.387-1.956-1.956-3.387zm2.11 11.67c.274.634.514 1.305.717 2.01.204.704.36 1.408.47 2.11.11.704.167 1.4.17 2.093a10.19 10.19 0 0 1-.17 1.94c-.51-.15-1.18-.14-2.008.024.213-.974.312-1.88.298-2.723a10.595 10.595 0 0 0-.37-2.558c-.23-.865-.573-1.77-1.028-2.72a48.398 48.398 0 0 0-1.714-3.208l-2.7-4.676a25.767 25.767 0 0 0-.875-1.42 21.753 21.753 0 0 0-.85-1.186c.525-.21 1.043-.45 1.554-.717.51-.267 1.112-.6 1.805-1a60.923 60.923 0 0 0 1.893-1.136 17.45 17.45 0 0 0 1.502-1.047c.137.364.325.787.565 1.267.24.48.517.99.83 1.53l7.535 13.054a6.1 6.1 0 0 1 .46.94.97.97 0 0 1-.036.756c-.115.25-.347.527-.698.832-.35.304-.864.688-1.54 1.15a3.186 3.186 0 0 0-.647-.858 4.97 4.97 0 0 0-1.038-.717 13.81 13.81 0 0 0 1.096-.55c.264-.152.45-.295.555-.43a.502.502 0 0 0 .108-.437 2.097 2.097 0 0 0-.243-.566l-2.172-3.762-3.47 2.004zm-1.954 7.223a6.16 6.16 0 0 0-1.466-.69 6.537 6.537 0 0 0-1.563-.332l.69-1.59a14.604 14.604 0 0 1 3.05.817l-.71 1.794zm-4.033-.027a2.137 2.137 0 0 0-.287.51 6.12 6.12 0 0 0-.26.872 23.78 23.78 0 0 0-.283 1.452c-.1.594-.225 1.34-.37 2.237a3.37 3.37 0 0 0-.92-.078 5.34 5.34 0 0 0-1.096.19 8.492 8.492 0 0 0 .812-2.41c.15-.843.175-1.782.077-2.816.39.034.75.034 1.08 0a8.61 8.61 0 0 0 1.06-.182c.14-.044.227-.04.26.017.03.056.007.126-.074.21zm-17.506-5.745c.68-.392 1.22-.72 1.624-.98.405-.26.798-.538 1.182-.834l1.044 1.81c-.426.19-.86.4-1.3.626a40.64 40.64 0 0 0-1.66.917l5.015 8.688c.21.36.354.684.435.97.082.285.043.584-.118.9-.16.313-.468.676-.924 1.086-.455.41-1.11.918-1.962 1.52a10.17 10.17 0 0 0-.84-.83 7.863 7.863 0 0 0-1.12-.836 20.7 20.7 0 0 0 1.457-.813c.36-.226.625-.43.797-.612.172-.183.262-.346.27-.49a.783.783 0 0 0-.117-.444l-4.68-8.105-4.448 2.568c-.846.488-1.512.886-2 1.195-.485.31-.936.6-1.35.877l-1.03-1.788c.236-.1.472-.204.706-.31.234-.108.484-.234.75-.38a93.69 93.69 0 0 0 2.035-1.132l4.45-2.568a106.39 106.39 0 0 0-1.3-2.202c-.33-.54-.576-.92-.74-1.138.35-.13.72-.29 1.105-.486.387-.194.696-.378.93-.55.192-.147.346-.176.462-.086.117.09.133.205.048.346a.79.79 0 0 0-.08.56c.044.186.098.335.162.446l1.2 2.08zm-1.79 11.537a25.633 25.633 0 0 0-1.934-1.475 35.97 35.97 0 0 0-2.03-1.31l1.267-1.644a38.25 38.25 0 0 1 2.034 1.195c.68.428 1.346.9 1.993 1.412l-1.33 1.822zm-12.53-7.01c.706.293 1.41.608 2.11.942.702.334 1.376.693 2.022 1.078l-1.13 2.12a56.81 56.81 0 0 0-2.01-1.152 41.097 41.097 0 0 0-2.06-1.044l1.067-1.945zM63 118.25c30.514 0 55.25-24.736 55.25-55.25S93.514 7.75 63 7.75 7.75 32.486 7.75 63 32.486 118.25 63 118.25zm-2.237-47.53c.262-.058.562-.097.9-.118.34-.02.753-.04 1.24-.063.52-.025 1.176-.163 1.964-.415.788-.25 1.72-.646 2.794-1.184 1.077-.536 2.303-1.235 3.682-2.096a87.9 87.9 0 0 0 4.634-3.133 10.2 10.2 0 0 0 .24 1.4c.098.378.23.74.394 1.09a321.96 321.96 0 0 1-4.068 2.362 69.403 69.403 0 0 1-3.052 1.65c-.88.445-1.643.802-2.29 1.074s-1.236.483-1.768.633c-.533.15-1.03.256-1.492.32-.462.063-.954.107-1.476.13-.62.046-1.087.126-1.4.24-.31.117-.536.344-.674.682-.123.33-.22.74-.286 1.232a18.89 18.89 0 0 0-.144 1.62 7.14 7.14 0 0 0-1.164-.31 9.118 9.118 0 0 0-1.23-.136c.132-.575.256-1.07.374-1.49.118-.42.23-.785.338-1.096.106-.31.212-.575.318-.793.105-.22.214-.407.326-.564l-3.66-6.34c-.582.337-1.08.634-1.495.892-.415.257-.75.498-1.01.722l-.972-1.684c.293-.132.648-.3 1.066-.505.42-.203.83-.42 1.23-.653a31.8 31.8 0 0 0 1.27-.775c.433-.277.775-.516 1.028-.718.14.4.292.778.46 1.134.17.355.413.81.733 1.364l3.193 5.53zm-15.907-.43l-2.712-4.7-5.425 3.133c-1.456.84-2.783 1.63-3.983 2.368-1.2.74-2.125 1.344-2.778 1.813l-1.237-2.14c.307-.14.708-.335 1.202-.583.494-.25 1.055-.54 1.684-.876a143.593 143.593 0 0 0 4.375-2.429 153.71 153.71 0 0 0 4.442-2.648c1.175-.734 2.054-1.315 2.638-1.745.15.357.367.813.652 1.37a42.88 42.88 0 0 0 1.05 1.915l1.848 3.2a32.46 32.46 0 0 0 1.93 2.96l-2.057 1.188-.72-1.247-9.395 5.424 3.072 5.32c.224.39.415.68.574.875.158.195.345.304.562.327.216.023.5-.045.853-.202.353-.157.838-.405 1.455-.743.876-.47 1.734-.942 2.577-1.42a68.054 68.054 0 0 0 2.465-1.465c.754-.453 1.335-.84 1.743-1.158.407-.318.686-.66.836-1.023.15-.364.185-.81.104-1.334a26.6 26.6 0 0 0-.45-2.124c.843.437 1.734.523 2.67.26.206 1.026.324 1.854.354 2.483.03.628-.083 1.184-.34 1.665-.258.48-.698.943-1.32 1.386-.623.443-1.495.988-2.617 1.636l-2.545 1.47c-.908.524-1.758.996-2.55 1.417-1.063.558-1.902.97-2.517 1.23-.615.264-1.123.368-1.524.313-.402-.055-.75-.274-1.045-.657-.297-.385-.652-.937-1.068-1.658l-3.444-5.965a27.726 27.726 0 0 0-1.155-1.855c-.337-.49-.602-.835-.793-1.04.37-.157.762-.342 1.176-.553.414-.212.79-.425 1.13-.64.185-.125.32-.144.41-.056.087.088.085.214-.005.377a.624.624 0 0 0-.105.394c.015.12.082.286.202.494l.384.665 9.396-5.424zM10.402 63c0-29.05 23.55-52.598 52.598-52.598 29.05 0 52.598 23.55 52.598 52.598 0 29.05-23.55 52.598-52.598 52.598-29.05 0-52.598-23.55-52.598-52.598z"/>
</symbol>
<symbol
id="mobile"
viewBox="0 0 126 126"><svg
id="mobile"
viewBox="0 0 11 16"
width="100%"
height="100%">
<path
fill="#0097FF"
fill-rule="evenodd"
d="M1 0h9a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm.5 1a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5h-8zm4 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg></symbol>
<symbol
id="cart-minus"
viewBox="0 0 126 126"><svg
id="cart-minus"
viewBox="0 0 44 44"
width="100%"
height="100%">
<path
fill="none"
d="M0 0h44v44H0z"/>
<path
fill-rule="evenodd"
d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z"
clip-rule="evenodd"/>
</svg></symbol>
<symbol
id="cart-add"
viewBox="0 0 126 126"><svg
id="cart-add"
viewBox="0 0 44 44"
width="100%"
height="100%">
<path
fill-rule="evenodd"
d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z"
clip-rule="evenodd"/>
</svg></symbol>
<symbol
id="select"
viewBox="0 0 126 126"><svg
id="select"
viewBox="0 0 20 20"
width="100%"
height="100%">
<path d="M17.595 3.494A9.978 9.978 0 0 0 10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10c0-1.631-.39-3.171-1.083-4.532l-9.973 9.608-4.715-4.714 1.653-1.653 3.062 3.062 8.65-8.277z"/>
</svg></symbol>
<symbol
id="delete"
viewBox="0 0 126 126"><svg
id="delete"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16 16"
width="100%"
height="100%">
<g
fill="#999"
fill-rule="nonzero"
transform="translate(-4 -4)">
<path
id="delete_a"
d="M13.132 12l6.47-6.47a.75.75 0 0 0-1.061-1.06l-6.47 6.47-6.47-6.47a.75.75 0 0 0-1.06 1.06L11.01 12l-.072.071.071.071-6.47 6.47a.75.75 0 0 0 1.061 1.06l6.47-6.47 6.47 6.47a.75.75 0 0 0 1.06-1.06l-6.47-6.47.072-.07-.071-.072z"/>
</g>
</svg></symbol>
</defs>
</svg>
</template>
<script>
export default {};
</script>
<style lang="scss">
</style>
components/tabbar.vue deleted 100644 → 0
View file @ 96d13733
<template>
<mt-tabbar v-model="selected">
<mt-tab-item id="0">
<div @click="goPage('/')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==0"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M16.822 17.089l.456.707c.212.33.14.778-.174 1.033a9.91 9.91 0 0 1-.767.555 9.817 9.817 0 0 1-7.473 1.395 9.867 9.867 0 0 1-6.265-4.334C-.383 11.822.927 5.618 5.52 2.616a9.81 9.81 0 0 1 7.475-1.394 9.866 9.866 0 0 1 6.264 4.334c.166.258.323.528.466.803.19.385.072.82-.262 1.039l-9.05 5.916a.783.783 0 0 1-1.086-.232l-.47-.73a1.668 1.668 0 0 1 .484-2.295l5.766-3.769a.286.286 0 0 0 .03-.455 6.576 6.576 0 0 0-7.821-.434 6.636 6.636 0 0 0-2.877 4.213 6.671 6.671 0 0 0 .926 5.026c1.99 3.085 6.104 3.968 9.17 1.969a1.65 1.65 0 0 1 2.288.482zm3.878-5.445c.56.863.314 2.02-.549 2.58l-.906.59a.786.786 0 0 1-1.086-.232l-1.177-1.812a.787.787 0 0 1 .23-1.086l1.813-1.176a.783.783 0 0 1 1.086.23l.589.906z"/>
</svg>
<svg
v-if="selected!=0"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M7.924 6.273A5.597 5.597 0 0 0 5.48 9.828a5.596 5.596 0 0 0 .787 4.242 5.646 5.646 0 0 0 7.793 1.66 2.188 2.188 0 0 1 3.02.638l.43.663c.377.58.247 1.358-.3 1.798a10 10 0 0 1-.771.555 9.93 9.93 0 0 1-7.523 1.395 9.937 9.937 0 0 1-6.306-4.334C-.393 11.82.926 5.618 5.55 2.615a9.935 9.935 0 0 1 7.523-1.393 9.937 9.937 0 0 1 6.781 5.148c.318.64.12 1.396-.467 1.777l-8.54 5.546c-.632.41-1.478.23-1.89-.401l-.443-.684a2.182 2.182 0 0 1 .641-3.016l5.011-3.255a5.612 5.612 0 0 0-6.242-.064zm6.813 10.507c-3.184 2.062-7.453 1.152-9.519-2.03a6.846 6.846 0 0 1-.96-5.182 6.847 6.847 0 0 1 2.986-4.344 6.869 6.869 0 0 1 8.13.46.892.892 0 0 1-.098 1.422l-5.44 3.534a.932.932 0 0 0-.274 1.287l.444.684a.117.117 0 0 0 .16.034l8.54-5.547c.05-.032.067-.095.035-.16a8.687 8.687 0 0 0-5.928-4.494 8.685 8.685 0 0 0-6.583 1.22c-4.044 2.627-5.198 8.056-2.572 12.1a8.686 8.686 0 0 0 5.517 3.792 8.68 8.68 0 0 0 6.583-1.22c.231-.15.458-.314.672-.483.047-.038.057-.102.032-.142l-.43-.662a.938.938 0 0 0-1.295-.269zm5.88-5.517c.714 1.099.4 2.571-.697 3.284l-.851.553a1.362 1.362 0 0 1-1.882-.401l-1.103-1.7a1.362 1.362 0 0 1 .4-1.882l1.699-1.102a1.357 1.357 0 0 1 1.883.399l.552.85zm-1.6-.168a.107.107 0 0 0-.07-.048.107.107 0 0 0-.083.016l-1.699 1.102a.112.112 0 0 0-.032.154l1.102 1.698c.021.032.056.05.095.05a.108.108 0 0 0 .06-.016l.849-.552c.519-.337.667-1.035.33-1.555l-.551-.849z"/>
</svg>
</div>
首页
</div>
</mt-tab-item>
<mt-tab-item id="1">
<div @click="goPage('/discover')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==1"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M3.929 3.929c3.899-3.9 10.243-3.9 14.142 0 3.899 3.899 3.899 10.243 0 14.142-3.899 3.9-10.243 3.9-14.142 0-3.9-3.899-3.9-10.243 0-14.142zM14.639 7a.363.363 0 0 0-.146.03l-4.39 1.901c-.254.11-.493.264-.701.471a2.23 2.23 0 0 0-.476.712l-1.896 4.38a.363.363 0 0 0 .476.476l4.38-1.896a2.203 2.203 0 0 0 1.183-1.178l1.9-4.39A.363.363 0 0 0 14.64 7zM11 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</svg>
<svg
v-if="selected!=1"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M16.62 2.727a.75.75 0 0 1-.844 1.24 8.455 8.455 0 0 0-4.095-1.44 8.5 8.5 0 0 0-9.153 7.792 8.499 8.499 0 0 0 7.79 9.153 8.5 8.5 0 0 0 9.154-7.791 8.46 8.46 0 0 0-1.435-5.449.75.75 0 1 1 1.24-.842 9.96 9.96 0 0 1 1.69 6.411c-.442 5.505-5.264 9.609-10.768 9.166-5.505-.442-9.61-5.263-9.166-10.768C1.475 4.694 6.296.59 11.8 1.033c1.75.14 3.398.727 4.819 1.694zM14.638 7c.244 0 .44.254.331.506l-1.9 4.39c-.11.255-.264.494-.471.702-.21.21-.454.367-.712.476l-4.38 1.895a.363.363 0 0 1-.476-.476l1.895-4.38c.11-.258.266-.5.477-.711.207-.208.447-.362.7-.471l4.391-1.9A.367.367 0 0 1 14.638 7zM12.45 9.55l-1.751.757a.737.737 0 0 0-.237.156.753.753 0 0 0-.156.236l-.758 1.752 1.742-.753a.766.766 0 0 0 .247-.161.733.733 0 0 0 .154-.234l.76-1.754z"/>
</svg>
</div>
发现
</div>
</mt-tab-item>
<mt-tab-item id="2">
<div @click="goPage('/order')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==2"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M2.75 1.5h16.5a.75.75 0 0 1 .75.75v11.5a6.758 6.758 0 0 1-6.75 6.75H2.75a.75.75 0 0 1-.75-.75V2.25a.75.75 0 0 1 .75-.75zm12 6.5a.75.75 0 0 0 0-1.5h-7.5a.75.75 0 0 0 0 1.5h7.5zm-3.002 5.003a.75.75 0 0 0 0-1.5H7.25a.75.75 0 0 0 0 1.5h4.498z"/>
</svg>
<svg
v-if="selected!=2"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M7.25 8a.75.75 0 0 1 0-1.5h7.5a.75.75 0 1 1 0 1.5h-7.5zm0 5.004a.75.75 0 1 1 0-1.5h4.498a.75.75 0 1 1 0 1.5H7.25zM3.5 3v16h9.75c2.9 0 5.25-2.35 5.25-5.25V5.748a.75.75 0 1 1 1.5 0v8.002a6.75 6.75 0 0 1-6.75 6.75H2.75a.75.75 0 0 1-.75-.75V2.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 1 1 0 1.5H3.5z"/>
</svg>
</div>
订单
</div>
</mt-tab-item>
<mt-tab-item id="3">
<div @click="goPage('/user')">
<div class="mint-tab-item-icon">
<svg
v-if="selected==3"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#4aa5f0"
fill-rule="evenodd"
d="M11 1c2.757 0 5 2.243 5 5v1c0 2.757-2.243 5-5 5S6 9.757 6 7V6c0-2.757 2.243-5 5-5zm5.967 10.071A6.76 6.76 0 0 1 21 17.251v3a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-3a6.76 6.76 0 0 1 4.033-6.18.992.992 0 0 1 1.135.263A6.476 6.476 0 0 0 11 13.5c1.919 0 3.642-.84 4.832-2.166a.993.993 0 0 1 1.135-.263z"/>
</svg>
<svg
v-if="selected!=3"
viewBox="0 0 22 22"
width="100%"
height="100%">
<path
fill="#818181"
fill-rule="nonzero"
d="M10.955 12H7.75a5.25 5.25 0 0 0-5.25 5.25v2.25h17v-2.25a5.244 5.244 0 0 0-2.626-4.548.75.75 0 0 1 .75-1.3l.183.11A6.745 6.745 0 0 1 21 17.25v3a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-3a6.75 6.75 0 0 1 6.436-6.743A4.984 4.984 0 0 1 6 7V6a5 5 0 0 1 10 0v1a5 5 0 0 1-5.045 5zM11 10.5A3.5 3.5 0 0 0 14.5 7V6a3.5 3.5 0 0 0-7 0v1a3.5 3.5 0 0 0 3.5 3.5z"/>
</svg>
</div>
我的
</div>
</mt-tab-item>
</mt-tabbar>
</template>
<script>
export default {
props: {
page: {
default: 0
}
},
data() {
return {
selected: 0
};
},
created() {
this.selected = this.page;
},
methods: {
goPage(url) {
this.$router.replace(url);
}
}
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/mixin";
.mint-tabbar>.mint-tab-item.is-selected {
background: #fafafa;
}
.mint-tab-item-icon {
@include wh(22px, 22px);
}
.mint-tabbar {
color: #818181;
position: fixed;
}
.mint-tabbar>.mint-tab-item.is-selected {
color: $primary;
}
</style>
layouts/default.vue
View file @ a0b1923b
<template> <template>
<div> <div>
<nuxt/> <nuxt/>
<svg-icon />
</div> </div>
</template> </template>
<script> <script>
import svgIcon from "../components/svg";
export default { export default {
components: { components: {
svgIcon
} }
}; };
</script> </script>
......
pages/campsiteDetail/components/goods/cartcontrol.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="cartcontrol">
<svg
v-show="food.count>0"
class="inner"
fill="rgb(35, 149, 255)"
@click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
<div
v-show="food.count>0"
class="cart-count">{{ food.count }}</div>
<svg
width="24"
height="24"
fill="rgb(35, 149, 255)"
@click="addCart"><use xlink:href="#cart-add"/></svg>
</div>
</template>
<script>
import Vue from "vue";
export default {
props: ['food'],
methods: {
addCart(event) {
if (!this.food.count) {
Vue.set(this.food, "count", 1);
} else {
this.food.count++;
}
this.$emit("add", event.target);
},
decreaseCart(event) {
if (this.food.count) {
this.food.count--;
}
}
}
};
</script>
<style lang="scss">
.cartcontrol {
display: flex;
align-items: center;
.inner {
width: 24px;
height: 24px;
}
.cart-count {
display: inline-block;
vertical-align: top;
width: 25px;
text-align: center;
font-size: 15px;
color: #333;
}
.cart-add {
display: inline-block;
padding: 6px;
line-height: 24px;
font-size: 24px;
color: rgb(0, 160, 220);
}
}
</style>
pages/campsiteDetail/components/goods/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="goods-page">
<div class="menu-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
:class="{'current':currentIndex === index}"
class="menu-item"
@click="selectMenu(index,$event)">
<span class="text">
<!-- <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span> -->
{{ item.name }}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
class="food-list food-list-hook">
<h1
:id="'a'+index"
class="title">{{ item.name }}</h1>
<ul>
<li
v-for="(food, index) in item.foods"
:key="index"
class="food-item border-1px">
<div class="icon">
<img :src="food.icon" >
</div>
<div class="content">
<h2 class="name">{{ food.name }}</h2>
<p class="desc">{{ food.description }}</p>
<div class="extra">
<span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
</div>
<div class="price">
<span class="now">￥<b>{{ food.price }}</b></span>
<cartcontrol :food="food" />
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<shopcart
ref="shopcart"
:select-foods="selectFoods"
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"/>
</div>
</template>
<script>
import shopcart from "./shopcart";
import cartcontrol from "./cartcontrol";
import * as shoppingApi from "~/assets/services/shopping";
export default {
components: {
shopcart,
cartcontrol
},
props: {
seller: {
default: {}
}
},
data() {
return {
goods: [],
listHeight: [],
scrollY: 0,
classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
currentIndex: 0,
isScroll: false
};
},
computed: {
selectFoods() {
let foods = [];
this.goods.forEach(good => {
good.foods.forEach(food => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
},
created() {},
mounted() {
shoppingApi.goods().then(res => {
if (res.code === 0) {
this.goods = res.data;
}
});
//菜品滚动选择类目
document.querySelector(".foods-wrapper").addEventListener(
"scroll",
this.throttle(() => {
// 防止手动选择的时候误操作
if (this.isScroll) {
return;
}
this.goods.map((item, index) => {
const rect_top = document
.querySelector("#a" + index)
.getBoundingClientRect().top;
const container_top = document
.querySelector(".foods-wrapper")
.getBoundingClientRect().top;
if (
rect_top - container_top < 100 &&
rect_top - container_top > -100
) {
this.currentIndex = index;
}
});
}, 50)
);
},
methods: {
selectMenu(index) {
if (index === this.currentIndex) {
return;
}
this.currentIndex = index;
this.animateScroll("#a" + index, ".foods-wrapper", 50);
},
// 平滑滚动方法
animateScroll(element, container, speed) {
this.isScroll = true;
let rect =
document.querySelector(element).getBoundingClientRect().top -
document.querySelector(container).getBoundingClientRect().top;
//获取元素相对窗口的top值，此处应加上窗口本身的偏移
let top = rect + document.querySelector(container).scrollTop;
let currentTop = 0;
let requestId;
//采用requestAnimationFrame，平滑动画
const step = timestamp => {
if (currentTop <= top) {
document.querySelector(container).scrollTo(0, currentTop);
requestId = window.requestAnimationFrame(step);
} else {
window.cancelAnimationFrame(requestId);
this.isScroll = false;
}
currentTop += speed;
};
window.requestAnimationFrame(step);
},
// 函数防抖
throttle(method, delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
method.apply(this, arguments);
}, delay);
};
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.goods-page {
display: flex;
background: #fff;
width: 100%;
.menu-wrapper {
flex: 0 0 80px;
width: 80px;
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #f8f8f8;
.menu-item {
display: table;
height: 54px;
padding: 0 12px;
line-height: 14px;
&.current {
position: relative;
margin-top: -1px;
z-index: 10;
background: #ffffff;
.text {
color: #333;
}
}
.icon {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-right: 2px;
background-size: 12px 12px;
background-repeat: no-repeat;
// &.decrease {
// bg-image('decrease_3');
// }
// &.discount {
// bg-image('discount_3');
// }
// &.guarantee {
// bg-image('guarantee_3');
// }
// &.invoice {
// bg-image('invoice_3');
// }
// &.special {
// bg-image('special_3');
// }
}
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
font-size: 12px;
position: relative;
color: #666;
}
}
}
.foods-wrapper {
width: calc(100vw - 80px);
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 60px;
.title {
padding-left: 14px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666;
}
.food-item {
display: flex;
margin: 10px;
padding-bottom: 18px;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
content: " ";
}
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
.icon {
flex: 0 0 80px;
margin-right: 10px;
}
.content {
flex: 1;
position: relative;
.name {
margin: 2px 0 8px 0px;
height: 14px;
line-height: 14px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.desc,
.extra {
line-height: 10px;
font-size: 12px;
color: rgb(147, 153, 159);
transform: scale(0.9) translateX(-6%);
}
.desc {
margin-bottom: 8px;
line-height: 12px;
max-width: px2rem(350px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extra {
.count {
margin-right: 12px;
}
}
.price {
width: 100%;
font-weight: 700;
position: absolute;
bottom: 0;
@include fj(space-between);
.now {
margin-right: 8px;
font-size: 14px;
color: rgb(255, 83, 57);
}
.old {
text-decoration: line-through;
font-size: 10px;
color: rgb(147, 153, 159);
}
b {
font-weight: normal;
font-size: 18px;
}
}
}
}
}
}
</style>
pages/campsiteDetail/components/goods/shopcart.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shopcart">
<div
class="content"
@click="toggleList">
<div class="content-left">
<div class="logo-wrapper">
<div
:class="{'highlight':totalCount>0}"
class="logo">
<span
v-if="totalCount<=0"
class="icon-shopping_cart">
<img
src="~/assets/images/cart.svg"
alt="">
</span>
<span
v-else
class="icon-shopping_cart highlight">
<img
src="~/assets/images/cart2.svg"
alt="">
</span>
</div>
<div
v-show="totalCount>0"
class="num">{{ totalCount }}</div>
</div>
<div
:class="{'highlight':totalPrice>0}"
class="price">￥{{ totalPrice }}元</div>
<div class="desc">另需配送费￥{{ deliveryPrice }}元</div>
</div>
<div class="content-right">
<div
:class="payClass"
class="pay">{{ payDesc }}</div>
</div>
</div>
<div class="ball-container">
<div
v-for="(ball, index) in balls"
:key="index">
<transition
name="drop"
@before-enter="beforeDrop"
@enter="dropping"
@after-enter="afterDrop">
<div
v-show="ball.show"
class="ball">
<div class="inner inner-hook"/>
</div>
</transition>
</div>
</div>
<div
v-show="listShow"
class="mark"
@click="toggleList"/>
<transition name="fold">
<div
v-show="listShow"
class="shopcart-list">
<div class="list-header">
<h1 class="title">已选商品</h1>
<span
class="empty"
@click="empty">清空</span>
</div>
<div
ref="listContent"
class="list-content">
<ul>
<li
v-for="(food, index) in selectFoods"
:key="index"
class="food">
<span class="name">{{ food.name }}</span>
<div class="price">
<span>￥{{ food.price*food.count }}</span>
</div>
<div class="cartcontrol-wrapper">
<cartcontrol
:food="food"
@add="addFood"/>
</div>
</li>
</ul>
</div>
</div>
</transition>
</div>
</template>
<script>
import cartcontrol from "./cartcontrol";
export default {
components: {
cartcontrol
},
props: {
selectFoods: {
type: Array,
default () {
return [];
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
}
},
data() {
return {
balls: [{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
}
],
dropBalls: [],
fold: true
};
},
computed: {
totalPrice() {
let total = 0;
this.selectFoods.forEach(food => {
total += food.price * food.count;
});
return total;
},
totalCount() {
let count = 0;
this.selectFoods.forEach(food => {
count += food.count;
});
return count;
},
payDesc() {
if (this.totalPrice === 0) {
return `¥${this.minPrice}元起送`;
} else if (this.totalPrice < this.minPrice) {
let diff = this.minPrice - this.totalPrice;
return `还差¥${diff}元起送`;
} else {
return "去结算";
}
},
payClass() {
if (this.totalPrice < this.minPrice) {
return "not-enough";
} else {
return "enough";
}
},
listShow() {
if (!this.totalCount) {
return false;
}
return !this.fold;
}
},
methods: {
toggleList() {
if (!this.totalCount) {
return;
}
this.fold = !this.fold;
},
hideList() {
this.fold = true;
},
empty() {
this.selectFoods.forEach(food => {
food.count = 0;
});
},
pay() {
if (this.totalPrice < this.minPrice) {
return;
}
window.alert(`支付${this.totalPrice}元`);
},
addFood(target) {
this.drop(target);
},
drop(el) {
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeDrop(el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect();
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.display = "";
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
dropping(el, done) {
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = "translate3d(0,0,0)";
el.style.transform = "translate3d(0,0,0)";
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = "translate3d(0,0,0)";
inner.style.transform = "translate3d(0,0,0)";
el.addEventListener("transitionend", done);
});
},
afterDrop(el) {
let ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = "none";
}
}
},
};
</script>
<style lang="scss">
.shopcart {
position: fixed;
left: 0;
bottom: 0;
z-index: 50;
width: 100%;
height: 48px;
background: #000;
.content {
display: flex;
background: rgba(61, 61, 63, 0.9);
font-size: 0;
color: rgba(255, 255, 255, 0.4);
.content-left {
flex: 1;
.logo-wrapper {
display: inline-block;
vertical-align: top;
position: relative;
top: -10px;
margin: 0 12px;
padding: 6px;
width: 56px;
height: 56px;
box-sizing: border-box;
border-radius: 50%;
background-image: radial-gradient(circle, #363636 6.266667vw, #444 0);
.logo {
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
background: #2b343c;
&.highlight {
background: rgb(0, 160, 220);
}
.icon-shopping_cart {
margin: 0 auto;
padding: 20% 0;
display: block;
width: 60%;
height: 60%;
color: #80858a;
}
}
.num {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 16px;
font-size: 9px;
font-weight: 700;
color: #ffffff;
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(-90deg, #ff7416, #ff3c15 98%);
}
}
.price {
display: inline-block;
vertical-align: top;
margin-top: 12px;
line-height: 24px;
padding-right: 12px;
box-sizing: border-box;
border-right: 1px solid rgba(255, 255, 255, 0.1);
font-size: 16px;
font-weight: 700;
&.highlight {
color: #fff;
}
}
.desc {
display: inline-block;
vertical-align: top;
margin: 12px 0 0 12px;
line-height: 24px;
font-size: 10px;
}
}
.content-right {
flex: 0 0 105px;
width: 105px;
.pay {
height: 48px;
line-height: 48px;
text-align: center;
font-size: 14px;
font-weight: 700;
&.not-enough {
color: #fff;
}
&.enough {
background: #00b43c;
color: #fff;
}
}
}
}
.ball-container {
.ball {
position: fixed;
left: 32px;
bottom: 22px;
z-index: 200;
&.drop-transition {
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
.inner {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(0, 160, 220);
transition: all 0.4s;
}
}
}
}
.mark {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: -2;
}
.shopcart-list {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
transform: translate3d(0, -100%, 0);
&.fold-enter-active,
&.fold-leave-active {
transition: all 0.5s;
}
&.fold-enter,
&.fold-leave-active {
transform: translate3d(0, 0, 0);
}
.list-header {
height: 40px;
line-height: 40px;
padding: 0 18px;
background: #f3f5f7;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
.title {
float: left;
font-size: 14px;
color: rgb(7, 17, 27);
}
.empty {
float: right;
font-size: 12px;
color: rgb(0, 160, 220);
}
}
.list-content {
padding: 0 18px;
max-height: 217px;
overflow: hidden;
background: #fff;
.food {
display: flex;
align-items: center;
position: relative;
padding: 12px 0;
box-sizing: border-box;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid rgba(7, 17, 27, 0.1);
content: " ";
}
.name {
line-height: 24px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.price {
position: absolute;
right: 90px;
bottom: 12px;
line-height: 24px;
font-size: 14px;
font-weight: 700;
color: rgb(240, 20, 20);
}
.cartcontrol-wrapper {
position: absolute;
right: 0;
}
}
}
}
}
</style>
pages/campsiteDetail/components/header.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shop-header">
<div class="head">
<nav :style="`background-image: url('${banner}');`">
<i
class="mintui mintui-back"
@click="$router.go(-1);"/>
<img
:src="seller.avatar"
class="shop-logo">
</nav>
</div>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.shop-header {
background: #fff;
.head {
height: px2rem(200px);
nav {
height: px2rem(200px);
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
padding: px2rem(10px);
position: relative;
.mintui-back {
font-size: px2rem(46px);
color: #fff;
}
.shop-logo {
width: px2rem(150px);
height: px2rem(150px);
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
}
}
.content {
font-size: px2rem(24px);
margin-top: px2rem(50px);
text-align: center;
h2 {
font-size: px2rem(40px);
}
.info {
color: #666;
span {
margin: 0 px2rem(10px);
}
}
}
.foot {
padding: 0 px2rem(70px);
margin-top: 10px;
font-size: px2rem(24px);
.mint-badge {
transform: scale(0.8) translateX(-10%);
border-radius: 1px;
}
.announcement {
display: inline-block;
width: 100%;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
pages/campsiteDetail/components/ratings/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratings-page">
<div class="ratings-content">
<div class="overview">
<div class="overview-left">
<h1 class="score">{{ seller.score }}</h1>
<div class="title">
商家评分
<rating-star :rating="seller.score" />
</div>
</div>
<div class="overview-right">
<div class="score-wrapper">
<span class="title">味道</span>
<p class="score">{{ seller.serviceScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">包装</span>
<p class="score">{{ seller.foodScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">配送</span>
<p class="score">{{ seller.deliveryTime }}</p>
</div>
</div>
</div>
<div class="placeholder"/>
<ratingselect
:select-type="selectType"
:only-content="onlyContent"
:ratings="ratings"
@select="selectRating"
@toggle="toggleContent" />
<div class="rating-wrapper">
<ul>
<li
v-for="(rating, index) in ratings"
v-show="needShow(rating.rateType, rating.text)"
:key="index"
class="rating-item">
<div class="avatar">
<span :style="'background-position: 0 '+rating.avatar"/>
</div>
<div class="content">
<h1 class="name">{{ rating.username }}</h1>
<div class="star-wrapper">
<rating-star
:size="24"
:rating="rating.score" />
</div>
<p class="text">{{ rating.text }}</p>
<div
v-show="rating.recommend && rating.recommend.length"
class="recommend">
<span
v-for="(item, index) in rating.recommend"
:key="index"
class="item">{{ item }}</span>
</div>
<div class="time">
{{ rating.rateTime }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import ratingStar from "~/components/ratingStar";
import ratingselect from "./ratingselect";
import * as shoppingApi from "~/assets/services/shopping";
import moment from "moment";
export default {
components: {
ratingStar,
ratingselect
},
props: {
seller: {
default: {}
}
},
data() {
return {
ratings: [],
selectType: 2,
onlyContent: true
};
},
mounted() {
shoppingApi.ratings().then(res => {
if (res.code === 0) {
this.ratings = res.data;
this.ratings.map(item => {
item.rateTime = moment(item.rateTime).format("YYYY/M/D");
});
}
});
},
methods: {
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === 2) {
return true;
} else {
return type === this.selectType;
}
},
selectRating(type) {
this.selectType = type;
},
toggleContent() {
this.onlyContent = !this.onlyContent;
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.ratings-page {
background: #fff;
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
.overview {
display: flex;
padding: 18px 0;
.overview-left {
width: px2rem(340px);
@include fj(center);
align-items: center;
text-align: center;
.score {
font-size: px2rem(80px);
margin-right: px2rem(20px);
color: #ff6000;
font-weight: 400;
}
.title {
font-size: 12px;
}
}
.overview-right {
flex: 1;
@include fj(space-around);
align-items: center;
text-align: center;
color: #666;
.score-wrapper {
.title {
display: inline-block;
}
.score {
font-size: px2rem(40px);
}
}
}
}
.rating-wrapper {
padding: 0 18px;
.rating-item {
display: flex;
padding: 18px 0;
.avatar {
flex: 0 0 28px;
width: 28px;
margin-right: 12px;
span {
border-radius: 50%;
display: inline-block;
width: 30px;
height: 30px;
background: url("../../../../assets/images/sprite-avatar.png");
background-position: 0 0;
background-size: 30px;
}
}
.content {
position: relative;
flex: 1;
font-size: px2rem(28px);
.name {
margin-bottom: 4px;
line-height: 12px;
color: rgb(7, 17, 27);
}
.star-wrapper {
margin-bottom: 6px;
.star {
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
}
.text {
margin: 8px 0;
line-height: 18px;
color: rgb(7, 17, 27);
}
.recommend {
line-height: 16px;
font-size: 0;
.icon-thumb_up,
.item {
display: inline-block;
margin: 0 8px 4px 0;
font-size: 9px;
}
.icon-thumb_up {
color: rgb(0, 160, 220);
}
.item {
padding: 0 6px;
border: 1px solid rgba(7, 17, 27, 0.1);
border-radius: 1px;
color: rgb(147, 153, 159);
background: #fff;
}
}
.time {
position: absolute;
top: 0;
right: 0;
line-height: 12px;
font-size: 10px;
color: rgb(147, 153, 159);
}
}
}
}
}
</style>
pages/campsiteDetail/components/ratings/ratingselect.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratingselect">
<div class="rating-type border-1px">
<span
:class="{'active':selectType===2}"
class="block positive"
@click="select(2,$event)">{{ desc.all }}
<span class="count">{{ ratings.length }}</span>
</span>
<span
:class="{'active':selectType===0}"
class="block positive"
@click="select(0,$event)">{{ desc.positive }}<span
class="count">{{ positives.length }}</span></span>
<span
:class="{'active':selectType===1}"
class="block negative"
@click="select(1,$event)">{{ desc.negative }}<span
class="count">{{ negatives.length }}</span></span>
</div>
<div
:class="{'on':onlyContent}"
class="switch"
@click="toggleContent">
<!-- <span class="icon-check_circle"></span> -->
<svg
width="12"
height="12"
class="check">
<use xlink:href="#select"/>
</svg>
<span class="text">只看有内容的评价</span>
</div>
</div>
</template>
<script>
export default {
props: {
ratings: {
type: Array,
default () {
return [];
}
},
selectType: {
type: Number,
default: 2
},
onlyContent: {
type: Boolean,
default: false
},
desc: {
type: Object,
default () {
return {
all: "全部",
positive: "满意",
negative: "不满意"
};
}
}
},
computed: {
positives() {
return this.ratings.filter(rating => {
return rating.rateType === 0;
});
},
negatives() {
return this.ratings.filter(rating => {
return rating.rateType === 1;
});
}
},
methods: {
select(type, event) {
this.$emit("select", type);
},
toggleContent(event) {
this.$emit("toggle");
}
}
};
</script>
<style lang="scss">
.ratingselect {
.rating-type {
padding: 18px 0;
margin: 0 18px;
font-size: 0;
.block {
display: inline-block;
padding: 8px 12px;
margin-right: 8px;
line-height: 16px;
border-radius: 1px;
font-size: 12px;
color: rgb(77, 85, 93);
&.active {
color: #fff;
}
.count {
margin-left: 2px;
font-size: 12px;
}
&.positive {
background: rgba(0, 160, 220, 0.2);
&.active {
background: rgb(0, 160, 220);
}
}
&.negative {
background: rgba(77, 85, 93, 0.2);
&.active {
background: rgb(77, 85, 93);
}
}
}
}
.switch {
display: flex;
align-items: center;
padding: 12px 18px;
line-height: 24px;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
color: rgb(147, 153, 159);
font-size: 0;
svg {
margin-right: 5px;
fill: #e8e8e8;
}
&.on {
.check {
fill: #76d572;
}
}
.icon-check_circle {
display: inline-block;
vertical-align: top;
margin-right: 4px;
font-size: 24px;
}
.text {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
}
}
</style>
pages/campsiteDetail/components/seller.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="seller-page">
<div class="logo">
<img
:src="banner"
alt="">
</div>
<h2>{{ seller.name }}</h2>
<p>{{ seller.bulletin }}</p>
<a
:href="seller.brandstory"
class="brandstory">查看品牌故事</a>
<div class="placeholder"/>
<h2>配送信息</h2>
<p>由蜂鸟快送提供配送，约{{ seller.deliveryTime }}分钟送达，距离2.1km</p>
<p>配送费￥{{ seller.deliveryPrice }}</p>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.seller-page {
background: #fff;
padding-bottom: px2rem(30px);
.logo {
padding: px2rem(30px) px2rem(30px) 0 px2rem(30px);
}
h2 {
font-size: px2rem(32px);
margin-top: px2rem(40px);
padding: 0 px2rem(30px) px2rem(20px) px2rem(30px);
}
p {
padding: 0 px2rem(30px);
color: #666;
font-size: px2rem(26px);
line-height: 1.5;
}
.brandstory {
display: block;
line-height: px2rem(100px);
margin-top: px2rem(50px);
color: #666;
font-size: px2rem(28px);
text-align: center;
}
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
}
</style>
pages/campsiteDetail/index.vue
View file @ a0b1923b
<template> <template>
<div class="shop-page"> <div
<Header :seller="seller" /> class="campsite-detail-page"
<mt-navbar v-model="selected"> style="margin-top:1.87733rem;">
<mt-tab-item id="goods">点餐</mt-tab-item> <Head/>
<mt-tab-item id="ratings">评价</mt-tab-item> <detail-banner
<mt-tab-item id="seller">商家</mt-tab-item> :list = "detail.pictureList"
</mt-navbar> :looptime="looptime"
<mt-tab-container v-model="selected"> :width="width"
<mt-tab-container-item id="goods"> :height="height"
<Goods :seller="seller" /> :background="background"
</mt-tab-container-item> :color="color"
<mt-tab-container-item id="ratings"> class="mb-50"
<Ratings :seller="seller" /> @prev="prev"
</mt-tab-container-item> @next="next"
<mt-tab-container-item id="seller"> @change="changeBanner"
<Seller :seller="seller" /> @click="bannerClick"/>
</mt-tab-container-item> <div class="detail-main-container">
</mt-tab-container> <div>
<h1 class="campsite-detail-name">{{ detail.name }}</h1>
<div class="campsite-detail-info">
<div
class="flex-aic">
<img
style="margin-right: 5px;width: 17px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAABU5JREFUaIHtmWtsFFUUx///e3e32y2lRSIaSrAIEhItFHdboo1GEgMWeSiGgjyKJDRrfMWY6Bdi0kRB/WKMr7BiKH2ApiI1YgqUGtJgVOw2GERCQqkQHwkE0JQ2dLe7c/xQdvucZdpZoG32l2yy994z557/nJn7GiBFihQpUqRIMW5h/F/tKu3LWvG0hnHfbYzHHkoJDLQe+6l1H8rLDQBwxNoKJy5fB8ougDT3MMoRgRDie/jejUGgGgBUvJGSz74ZHaMQIAQFsXI8g1AApNdQRMK3MjC7kHTFCyLxRDmGtAbQFQ3NjHSE/7vJcSWFzAlZ2XDIn0O1mQoUo7vzVMmLHTcvrOSRd3S303NNhmxTQ9aOI5IlcNQOTqaP6I0obKxciijXgCwAcBeBToH8FgW+ueyM7jq3cFNXEuMcMcMWmF9Xke3K0J/B4DNkvycgi+BUB7B4SlhvubOxZmXz4+ubkxjriBiWwNwjFW5XWDcRnJvIjuQ0GHLMe6Dy0ZbijT8MMhBhweE987RE04YZbz86ukLnTq4ou5DIZlgCp4TUR1Q94qRn3fBupDscCGtc9aRpF7udDwGyg8BkAtRKfe4NBPJa/P7uvn4KD1d/CtAvtLdq8qS7I94DFWvDQKOZjWWB876vzEGEa2NlIyplweLSnei3PEBdfkPFSRccxwlkgJitc91rAVT29SWCHEX7AxMBh6LOTmRjWaArghUkPQAAkdNBd1sl+osDAPy6aNOZgsaqrTC4lQANqGUYIDASCb/scDqvKcBttf+hMIRtne1Xv9AZ2U4zm2E8our+eIDkdiwsj5hZdoTCeyY60t4CoQmZOrD9+JObzwNYbb3vxOQd3T3JrM36PKh613cQw0hkSldUhkjubcG6QAOney9Sz6G2VpuZZhjpTwkZ851wlLvZWH5EQwjtT4f7PQBuRTxYmB1e/gtQN9Bubv2OaQTeJkABBIJDg5yVlyvvI7kzGNYjXmgAQFjJvycWl15MZGO5gxOLy/4obKiuI/BsT43s9R2sXBlsT/8OJSVRiNB7qOZuraSBYGaPCf7uaG/bOdCXb8HMzSqK7dT2RtJ0MOI7WFkUAs6Y2QzrDnYaoZc8yj1fQeYQUFqprwqzuy7yYNUFOVwzEUqmEj0jrQAiGmWnSsoH7SupUZqkzbVDUYqQFIG1q7RHu16gIVl9QnMSzIFCTk9VbwMFhkRlvXd/INiyzH+pn6+IbBEHPhGxN02QPBtV/DqRjWWBhdlLt0L4Bq1O0IRW4DqmeWZ7A4GivquZ5iWlTQAesNr3jUg0TVgSOKu+Pg245CdAETEAXAQQFGDwhphwEcwnMP26fx/vcb8OYNvIwreHJYF3qMurAWYBAAS7/2m/5P+r5LVrZvbeQMDJ6Z5irbGPgFbkq7lHKt6/HVsoS/OgaCMvNihEnfwgkTgAaPH7u4PFG74V4AoAgMyY3BGeYDvaEWApgxQVvxE6ir0LDlWFLPqfBFw/ypuQGa/0NdQUKcjHFLE1yAjQJog83zXUq3KdYU+0BGbYPRtWlHcoyLfrh8AcgXMlgCrTvqw5ot2FZb/rpVveFEgngIidnwCtkO59iTq2lMEOo2uby1CDViRWUVEaLT+evRIrNy8pbZpV/+HkSHqmrRSee+x8GCw3bE8Tvz+x+QpiA0aSaF3yitX32Bapc9GxzrgXaPoOuhzanXukwtY8datwdRpus1SZCtRMb50yVj6gKYHZ7stUYPwEbYwTT6yAP4+akyIbCCCgboqV++aVvobqNUownzBG7deiRAiUGMTx4KINX2IcJCtFihQpUqRIcQP+B7jnvcfwUWbhAAAAAElFTkSuQmCC">
<div style="font-size: 14px;">{{ detail.address }}</div>
</div>
<div
class="flex-aic"
style="margin: 13px 0;">
<img
style="margin-right: 5px;width: 16px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAABU5JREFUaIHtmWtsFFUUx///e3e32y2lRSIaSrAIEhItFHdboo1GEgMWeSiGgjyKJDRrfMWY6Bdi0kRB/WKMr7BiKH2ApiI1YgqUGtJgVOw2GERCQqkQHwkE0JQ2dLe7c/xQdvucZdpZoG32l2yy994z557/nJn7GiBFihQpUqRIMW5h/F/tKu3LWvG0hnHfbYzHHkoJDLQe+6l1H8rLDQBwxNoKJy5fB8ougDT3MMoRgRDie/jejUGgGgBUvJGSz74ZHaMQIAQFsXI8g1AApNdQRMK3MjC7kHTFCyLxRDmGtAbQFQ3NjHSE/7vJcSWFzAlZ2XDIn0O1mQoUo7vzVMmLHTcvrOSRd3S303NNhmxTQ9aOI5IlcNQOTqaP6I0obKxciijXgCwAcBeBToH8FgW+ueyM7jq3cFNXEuMcMcMWmF9Xke3K0J/B4DNkvycgi+BUB7B4SlhvubOxZmXz4+ubkxjriBiWwNwjFW5XWDcRnJvIjuQ0GHLMe6Dy0ZbijT8MMhBhweE987RE04YZbz86ukLnTq4ou5DIZlgCp4TUR1Q94qRn3fBupDscCGtc9aRpF7udDwGyg8BkAtRKfe4NBPJa/P7uvn4KD1d/CtAvtLdq8qS7I94DFWvDQKOZjWWB876vzEGEa2NlIyplweLSnei3PEBdfkPFSRccxwlkgJitc91rAVT29SWCHEX7AxMBh6LOTmRjWaArghUkPQAAkdNBd1sl+osDAPy6aNOZgsaqrTC4lQANqGUYIDASCb/scDqvKcBttf+hMIRtne1Xv9AZ2U4zm2E8our+eIDkdiwsj5hZdoTCeyY60t4CoQmZOrD9+JObzwNYbb3vxOQd3T3JrM36PKh613cQw0hkSldUhkjubcG6QAOney9Sz6G2VpuZZhjpTwkZ851wlLvZWH5EQwjtT4f7PQBuRTxYmB1e/gtQN9Bubv2OaQTeJkABBIJDg5yVlyvvI7kzGNYjXmgAQFjJvycWl15MZGO5gxOLy/4obKiuI/BsT43s9R2sXBlsT/8OJSVRiNB7qOZuraSBYGaPCf7uaG/bOdCXb8HMzSqK7dT2RtJ0MOI7WFkUAs6Y2QzrDnYaoZc8yj1fQeYQUFqprwqzuy7yYNUFOVwzEUqmEj0jrQAiGmWnSsoH7SupUZqkzbVDUYqQFIG1q7RHu16gIVl9QnMSzIFCTk9VbwMFhkRlvXd/INiyzH+pn6+IbBEHPhGxN02QPBtV/DqRjWWBhdlLt0L4Bq1O0IRW4DqmeWZ7A4GivquZ5iWlTQAesNr3jUg0TVgSOKu+Pg245CdAETEAXAQQFGDwhphwEcwnMP26fx/vcb8OYNvIwreHJYF3qMurAWYBAAS7/2m/5P+r5LVrZvbeQMDJ6Z5irbGPgFbkq7lHKt6/HVsoS/OgaCMvNihEnfwgkTgAaPH7u4PFG74V4AoAgMyY3BGeYDvaEWApgxQVvxE6ir0LDlWFLPqfBFw/ypuQGa/0NdQUKcjHFLE1yAjQJog83zXUq3KdYU+0BGbYPRtWlHcoyLfrh8AcgXMlgCrTvqw5ot2FZb/rpVveFEgngIidnwCtkO59iTq2lMEOo2uby1CDViRWUVEaLT+evRIrNy8pbZpV/+HkSHqmrRSee+x8GCw3bE8Tvz+x+QpiA0aSaF3yitX32Bapc9GxzrgXaPoOuhzanXukwtY8datwdRpus1SZCtRMb50yVj6gKYHZ7stUYPwEbYwTT6yAP4+akyIbCCCgboqV++aVvobqNUownzBG7deiRAiUGMTx4KINX2IcJCtFihQpUqRIcQP+B7jnvcfwUWbhAAAAAElFTkSuQmCC">
<span style="color: #666;font-size: 14px;">营地预约热线</span>
<div>{{ detail.phone }} </div>
</div>
</div>
</div>
<div>
<div style="height: 10px;background: #eee;"/>
</div>
<div
id="nav"
:class="searchBarFixed == true ? 'isFixed' :''"
class="scroll">
<div
style="border-bottom: 1px solid #dfdfdf;"
class="flex-aic-jcb detail-list" >
<ul class="select-tab flex-aic-jcb">
<li
:class="{active:active=='activity'}"
class="select-tab-li-l mui-control-item"
@click="activity()">营地详情</li>
<li
:class="{ active:active=='lastest'}"
class="select-tab-li-l mui-control-item"
@click="lastest()">配套设施收费</li>
<li
:class="{ active:active=='rank'}"
class="select-tab-li-l mui-control-item"
@click="rank()" >预定须知</li>
</ul>
</div>
</div>
<div id="segmentedControlContents">
<!--详细内容-->
<div
id="activityIntro"
class="scroll0" >
<div class="base-set">
营地详情
</div>
<div
class="bt-line"
v-html="detail.content"/>
</div>
<div
id="lastestDubbing"
class="scroll1" >
<div class="base-set">
配套设施收费
</div>
<div
class="bt-line"
v-html="detail.configure"/>
</div>
<div
id="rankLlistDetail"
class="scroll3">
<div class="base-set" >
预定须知
</div>
<div
v-html="notice[0].value"/>
</div>
</div>
</div>
<go-top/>
</div> </div>
</template> </template>
<script> <script>
import Header from "./components/header"; import axios from '../../plugins/axios'
import Goods from "./components/goods"; import Head from "~/components/head";
import Ratings from "./components/ratings"; import DetailBanner from '~/components/detailBanner'
import Seller from "./components/seller"; import GoTop from "~/components/goTop";
import * as shoppingApi from "~/assets/services/shopping";
export default { export default {
components: { components: {
Header, Head,
Goods, DetailBanner,
Ratings, GoTop
Seller
}, },
data() { data() {
return { return {
selected: "goods", looptime: 4000, // 循环时间
seller: {} touchend: false,////没有更多数据
dataType: [],
totalCount: "",
dataDetail: [],
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
active: 'activity',
searchBarFixed:false,
}; };
}, },
async asyncData() { async asyncData({ route }) {
const { const { data } = await axios.get( "/api/uccn/app/unauth/campsite/shop?id=" + route.query.id);
data let user = data.data;
} = await shoppingApi.seller(); data.data.content = data.data.content.replace(/<img/g,"<img style='width:100%'");
return { let pic = [];
seller: data data.data.campsiteShopCarouselDetailVos.map(function(item){
}; pic.push(item.imgUrl);
});
user.pictureList = pic;
user.pictureNum = pic.length;
if (!user) {
return error({ message: 'User not found', statusCode: 404 })
}
let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=13');
let notice = noticeData.data.data;
return {detail: user, notice: notice}
}, },
created() { created() {
// vue resource window.addEventListener('scroll', this.handleScroll);
// this.$http.get('api/seller').then((res) => { },
// res = res.body; methods: {
// if(res.errno === ERR_OK){ // 点击下一页回调
// this.seller = res.data; prev () {},
// console.log(this.seller); // 点击下一页回调
// } next () {},
// }) // 鼠标移入状态点回调
changeBanner () {},
bannerClick () {},
handleScroll: function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let path = $nuxt.$route.path;
if(path == '/campsiteDetail'){
var menuTop = document.querySelector('#nav').offsetTop;
//滑动到指定位置菜单吸顶
if (scrollTop > menuTop+180) {
this.searchBarFixed = true;
}
//滑动到指定位置相应菜单高亮
var top1 = document.querySelector('#activityIntro').offsetTop;
var top2 = document.querySelector('#lastestDubbing').offsetTop;
var top3 = document.querySelector('#rankLlistDetail').offsetTop;
if (scrollTop < top1+180) {
this.active = 'activity';
this.searchBarFixed = false;
}
if (scrollTop < top2+180) {
this.active = 'activity';
} else if (scrollTop >= top2+180 && scrollTop < top3+180) {
this.active = 'lastest';
} else if (scrollTop >= top3+130) {
this.active = 'rank';
}
}
},
lastest(){//配套设施收费
this.active = "lastest";
let top1 = document.querySelector('#lastestDubbing').offsetTop;
let top = document.querySelector('#activityIntro').offsetTop;
if(this.searchBarFixed){
document.documentElement.scrollTop = top1 +180;
} else {
document.documentElement.scrollTop = top1+130;
}
this.searchBarFixed = true;
},
activity(){
//营地详情
this.active = "activity";
let top = document.querySelector('#nav').offsetTop;
var top1 = document.querySelector('#activityIntro').offsetTop;
if(this.searchBarFixed){
document.documentElement.scrollTop = top1 +180;
} else {
document.documentElement.scrollTop = top1 +130;
}
this.searchBarFixed = true;
},
rank(){
//预定须知
this.active = "rank";
let top1 = document.querySelector('#rankLlistDetail').offsetTop;
if(this.searchBarFixed){
document.documentElement.scrollTop = top1 +180;
} else {
document.documentElement.scrollTop = top1 +130;
}
this.searchBarFixed = true;
}
}, },
}; };
...@@ -65,8 +225,101 @@ ...@@ -65,8 +225,101 @@
<style lang="scss"> <style lang="scss">
@import "../../assets/styles/mixin"; @import "../../assets/styles/mixin";
.shop-page { .campsite-detail-page {
font-size: px2rem(24px); font-size: px2rem(26px);
.campsite-detail-info{
padding: 13px px2rem(20px);
font-size: 14px;
span{
color: #666;
min-width: 60px;
margin-right: 13px;
}
}
}
.detail-main-container{
border-radius: 7px 7px 0 0;
box-shadow: 0px 0px 13px #666;
margin-top: -10px;
z-index: 99;
position: relative;
background: #fff;
.campsite-detail-name{
padding: 14px px2rem(20px) 0 px2rem(20px);
font-size: px2rem(34px);
font-weight: bold;
}
.vehicle-detail-config{
padding: 0 px2rem(20px);
border-bottom: 1px solid #dfdfdf;
.config{
margin-right: 30px;
margin-bottom: 13px;
margin-top: 13px;
}
}
.vehicle-lower{
padding: 0 px2rem(20px);
font-size: px2rem(30px);
margin-top: px2rem(20px);
margin-bottom: px2rem(20px);
span{
color: #F25B5B;
font-size: px2rem(36px);
font-weight: bold;
margin-left: px2rem(30px);
margin-right: px2rem(4px);
}
}
.member-list{
padding: 0 px2rem(20px);
}
.member-list-c img{
width: 20px;
height: 20px;
margin-right: px2rem(20px);
}
.member-list-name{
color: #666;
font-size:px2rem(26px);
margin-bottom: px2rem(20px);
}
.market-price{
font-size: px2rem(30px);
margin: px2rem(34px) 0;
padding: 0 px2rem(20px);
}
.detail-list{
height: px2rem(100px);
}
.select-tab{
width: 100%;
.select-tab-li-l{
font-size:16px;
color: #999;
padding: 0 px2rem(20px);
}
.select-tab-li-l.active{
color: #333;
font-weight: bold;
height: px2rem(100px);
line-height: px2rem(100px);
border-bottom: 2px solid #1bbb9f;
}
}
.scroll0, .scroll1, .scroll2, .scroll3{
padding: 0 px2rem(20px);
.base-set{
margin: 17px 0;
font-size: 15px;
font-weight: bold;
}
.base-set-name{
font-size: 13px;
color: #666;
padding: 0 10px 6px 0;
}
}
.mint-navbar { .mint-navbar {
position: sticky; position: sticky;
...@@ -98,6 +351,27 @@ ...@@ -98,6 +351,27 @@
} }
} }
} }
.left-item{
width: 30%;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
height: 34px;
padding-left: 10px;
line-height: 34px;
}
.right-item{
width:70%;
border-right: 1px solid #ccc;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.modal-item{
border-top:1px solid #ccc;
}
.kr-article-article .modal-item:last-child{
border-bottom: 1px solid #ccc;
}
} }
</style> </style>
pages/index.vue
View file @ a0b1923b
...@@ -153,7 +153,6 @@ ...@@ -153,7 +153,6 @@
<script> <script>
import Footer from "~/components/footer"; import Footer from "~/components/footer";
import Head from "~/components/head"; import Head from "~/components/head";
import ShopList from "~/components/shopList";
import config from "~/config"; import config from "~/config";
import axios from '../plugins/axios' import axios from '../plugins/axios'
import { import {
...@@ -164,7 +163,6 @@ ...@@ -164,7 +163,6 @@
components: { components: {
Head, Head,
Footer, Footer,
ShopList,
GoTop GoTop
}, },
data() { data() {
......
pages/newsDetail/components/goods/cartcontrol.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="cartcontrol">
<svg
v-show="food.count>0"
class="inner"
fill="rgb(35, 149, 255)"
@click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
<div
v-show="food.count>0"
class="cart-count">{{ food.count }}</div>
<svg
width="24"
height="24"
fill="rgb(35, 149, 255)"
@click="addCart"><use xlink:href="#cart-add"/></svg>
</div>
</template>
<script>
import Vue from "vue";
export default {
props: ['food'],
methods: {
addCart(event) {
if (!this.food.count) {
Vue.set(this.food, "count", 1);
} else {
this.food.count++;
}
this.$emit("add", event.target);
},
decreaseCart(event) {
if (this.food.count) {
this.food.count--;
}
}
}
};
</script>
<style lang="scss">
.cartcontrol {
display: flex;
align-items: center;
.inner {
width: 24px;
height: 24px;
}
.cart-count {
display: inline-block;
vertical-align: top;
width: 25px;
text-align: center;
font-size: 15px;
color: #333;
}
.cart-add {
display: inline-block;
padding: 6px;
line-height: 24px;
font-size: 24px;
color: rgb(0, 160, 220);
}
}
</style>
pages/newsDetail/components/goods/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="goods-page">
<div class="menu-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
:class="{'current':currentIndex === index}"
class="menu-item"
@click="selectMenu(index,$event)">
<span class="text">
<!-- <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span> -->
{{ item.name }}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
class="food-list food-list-hook">
<h1
:id="'a'+index"
class="title">{{ item.name }}</h1>
<ul>
<li
v-for="(food, index) in item.foods"
:key="index"
class="food-item border-1px">
<div class="icon">
<img :src="food.icon" >
</div>
<div class="content">
<h2 class="name">{{ food.name }}</h2>
<p class="desc">{{ food.description }}</p>
<div class="extra">
<span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
</div>
<div class="price">
<span class="now">￥<b>{{ food.price }}</b></span>
<cartcontrol :food="food" />
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<shopcart
ref="shopcart"
:select-foods="selectFoods"
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"/>
</div>
</template>
<script>
import shopcart from "./shopcart";
import cartcontrol from "./cartcontrol";
import * as shoppingApi from "~/assets/services/shopping";
export default {
components: {
shopcart,
cartcontrol
},
props: {
seller: {
default: {}
}
},
data() {
return {
goods: [],
listHeight: [],
scrollY: 0,
classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
currentIndex: 0,
isScroll: false
};
},
computed: {
selectFoods() {
let foods = [];
this.goods.forEach(good => {
good.foods.forEach(food => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
},
created() {},
mounted() {
shoppingApi.goods().then(res => {
if (res.code === 0) {
this.goods = res.data;
}
});
//菜品滚动选择类目
document.querySelector(".foods-wrapper").addEventListener(
"scroll",
this.throttle(() => {
// 防止手动选择的时候误操作
if (this.isScroll) {
return;
}
this.goods.map((item, index) => {
const rect_top = document
.querySelector("#a" + index)
.getBoundingClientRect().top;
const container_top = document
.querySelector(".foods-wrapper")
.getBoundingClientRect().top;
if (
rect_top - container_top < 100 &&
rect_top - container_top > -100
) {
this.currentIndex = index;
}
});
}, 50)
);
},
methods: {
selectMenu(index) {
if (index === this.currentIndex) {
return;
}
this.currentIndex = index;
this.animateScroll("#a" + index, ".foods-wrapper", 50);
},
// 平滑滚动方法
animateScroll(element, container, speed) {
this.isScroll = true;
let rect =
document.querySelector(element).getBoundingClientRect().top -
document.querySelector(container).getBoundingClientRect().top;
//获取元素相对窗口的top值，此处应加上窗口本身的偏移
let top = rect + document.querySelector(container).scrollTop;
let currentTop = 0;
let requestId;
//采用requestAnimationFrame，平滑动画
const step = timestamp => {
if (currentTop <= top) {
document.querySelector(container).scrollTo(0, currentTop);
requestId = window.requestAnimationFrame(step);
} else {
window.cancelAnimationFrame(requestId);
this.isScroll = false;
}
currentTop += speed;
};
window.requestAnimationFrame(step);
},
// 函数防抖
throttle(method, delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
method.apply(this, arguments);
}, delay);
};
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.goods-page {
display: flex;
background: #fff;
width: 100%;
.menu-wrapper {
flex: 0 0 80px;
width: 80px;
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #f8f8f8;
.menu-item {
display: table;
height: 54px;
padding: 0 12px;
line-height: 14px;
&.current {
position: relative;
margin-top: -1px;
z-index: 10;
background: #ffffff;
.text {
color: #333;
}
}
.icon {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-right: 2px;
background-size: 12px 12px;
background-repeat: no-repeat;
// &.decrease {
// bg-image('decrease_3');
// }
// &.discount {
// bg-image('discount_3');
// }
// &.guarantee {
// bg-image('guarantee_3');
// }
// &.invoice {
// bg-image('invoice_3');
// }
// &.special {
// bg-image('special_3');
// }
}
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
font-size: 12px;
position: relative;
color: #666;
}
}
}
.foods-wrapper {
width: calc(100vw - 80px);
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 60px;
.title {
padding-left: 14px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666;
}
.food-item {
display: flex;
margin: 10px;
padding-bottom: 18px;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
content: " ";
}
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
.icon {
flex: 0 0 80px;
margin-right: 10px;
}
.content {
flex: 1;
position: relative;
.name {
margin: 2px 0 8px 0px;
height: 14px;
line-height: 14px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.desc,
.extra {
line-height: 10px;
font-size: 12px;
color: rgb(147, 153, 159);
transform: scale(0.9) translateX(-6%);
}
.desc {
margin-bottom: 8px;
line-height: 12px;
max-width: px2rem(350px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extra {
.count {
margin-right: 12px;
}
}
.price {
width: 100%;
font-weight: 700;
position: absolute;
bottom: 0;
@include fj(space-between);
.now {
margin-right: 8px;
font-size: 14px;
color: rgb(255, 83, 57);
}
.old {
text-decoration: line-through;
font-size: 10px;
color: rgb(147, 153, 159);
}
b {
font-weight: normal;
font-size: 18px;
}
}
}
}
}
}
</style>
pages/newsDetail/components/goods/shopcart.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shopcart">
<div
class="content"
@click="toggleList">
<div class="content-left">
<div class="logo-wrapper">
<div
:class="{'highlight':totalCount>0}"
class="logo">
<span
v-if="totalCount<=0"
class="icon-shopping_cart">
<img
src="~/assets/images/cart.svg"
alt="">
</span>
<span
v-else
class="icon-shopping_cart highlight">
<img
src="~/assets/images/cart2.svg"
alt="">
</span>
</div>
<div
v-show="totalCount>0"
class="num">{{ totalCount }}</div>
</div>
<div
:class="{'highlight':totalPrice>0}"
class="price">￥{{ totalPrice }}元</div>
<div class="desc">另需配送费￥{{ deliveryPrice }}元</div>
</div>
<div class="content-right">
<div
:class="payClass"
class="pay">{{ payDesc }}</div>
</div>
</div>
<div class="ball-container">
<div
v-for="(ball, index) in balls"
:key="index">
<transition
name="drop"
@before-enter="beforeDrop"
@enter="dropping"
@after-enter="afterDrop">
<div
v-show="ball.show"
class="ball">
<div class="inner inner-hook"/>
</div>
</transition>
</div>
</div>
<div
v-show="listShow"
class="mark"
@click="toggleList"/>
<transition name="fold">
<div
v-show="listShow"
class="shopcart-list">
<div class="list-header">
<h1 class="title">已选商品</h1>
<span
class="empty"
@click="empty">清空</span>
</div>
<div
ref="listContent"
class="list-content">
<ul>
<li
v-for="(food, index) in selectFoods"
:key="index"
class="food">
<span class="name">{{ food.name }}</span>
<div class="price">
<span>￥{{ food.price*food.count }}</span>
</div>
<div class="cartcontrol-wrapper">
<cartcontrol
:food="food"
@add="addFood"/>
</div>
</li>
</ul>
</div>
</div>
</transition>
</div>
</template>
<script>
import cartcontrol from "./cartcontrol";
export default {
components: {
cartcontrol
},
props: {
selectFoods: {
type: Array,
default () {
return [];
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
}
},
data() {
return {
balls: [{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
}
],
dropBalls: [],
fold: true
};
},
computed: {
totalPrice() {
let total = 0;
this.selectFoods.forEach(food => {
total += food.price * food.count;
});
return total;
},
totalCount() {
let count = 0;
this.selectFoods.forEach(food => {
count += food.count;
});
return count;
},
payDesc() {
if (this.totalPrice === 0) {
return `¥${this.minPrice}元起送`;
} else if (this.totalPrice < this.minPrice) {
let diff = this.minPrice - this.totalPrice;
return `还差¥${diff}元起送`;
} else {
return "去结算";
}
},
payClass() {
if (this.totalPrice < this.minPrice) {
return "not-enough";
} else {
return "enough";
}
},
listShow() {
if (!this.totalCount) {
return false;
}
return !this.fold;
}
},
methods: {
toggleList() {
if (!this.totalCount) {
return;
}
this.fold = !this.fold;
},
hideList() {
this.fold = true;
},
empty() {
this.selectFoods.forEach(food => {
food.count = 0;
});
},
pay() {
if (this.totalPrice < this.minPrice) {
return;
}
window.alert(`支付${this.totalPrice}元`);
},
addFood(target) {
this.drop(target);
},
drop(el) {
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeDrop(el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect();
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.display = "";
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
dropping(el, done) {
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = "translate3d(0,0,0)";
el.style.transform = "translate3d(0,0,0)";
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = "translate3d(0,0,0)";
inner.style.transform = "translate3d(0,0,0)";
el.addEventListener("transitionend", done);
});
},
afterDrop(el) {
let ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = "none";
}
}
},
};
</script>
<style lang="scss">
.shopcart {
position: fixed;
left: 0;
bottom: 0;
z-index: 50;
width: 100%;
height: 48px;
background: #000;
.content {
display: flex;
background: rgba(61, 61, 63, 0.9);
font-size: 0;
color: rgba(255, 255, 255, 0.4);
.content-left {
flex: 1;
.logo-wrapper {
display: inline-block;
vertical-align: top;
position: relative;
top: -10px;
margin: 0 12px;
padding: 6px;
width: 56px;
height: 56px;
box-sizing: border-box;
border-radius: 50%;
background-image: radial-gradient(circle, #363636 6.266667vw, #444 0);
.logo {
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
background: #2b343c;
&.highlight {
background: rgb(0, 160, 220);
}
.icon-shopping_cart {
margin: 0 auto;
padding: 20% 0;
display: block;
width: 60%;
height: 60%;
color: #80858a;
}
}
.num {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 16px;
font-size: 9px;
font-weight: 700;
color: #ffffff;
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(-90deg, #ff7416, #ff3c15 98%);
}
}
.price {
display: inline-block;
vertical-align: top;
margin-top: 12px;
line-height: 24px;
padding-right: 12px;
box-sizing: border-box;
border-right: 1px solid rgba(255, 255, 255, 0.1);
font-size: 16px;
font-weight: 700;
&.highlight {
color: #fff;
}
}
.desc {
display: inline-block;
vertical-align: top;
margin: 12px 0 0 12px;
line-height: 24px;
font-size: 10px;
}
}
.content-right {
flex: 0 0 105px;
width: 105px;
.pay {
height: 48px;
line-height: 48px;
text-align: center;
font-size: 14px;
font-weight: 700;
&.not-enough {
color: #fff;
}
&.enough {
background: #00b43c;
color: #fff;
}
}
}
}
.ball-container {
.ball {
position: fixed;
left: 32px;
bottom: 22px;
z-index: 200;
&.drop-transition {
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
.inner {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(0, 160, 220);
transition: all 0.4s;
}
}
}
}
.mark {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: -2;
}
.shopcart-list {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
transform: translate3d(0, -100%, 0);
&.fold-enter-active,
&.fold-leave-active {
transition: all 0.5s;
}
&.fold-enter,
&.fold-leave-active {
transform: translate3d(0, 0, 0);
}
.list-header {
height: 40px;
line-height: 40px;
padding: 0 18px;
background: #f3f5f7;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
.title {
float: left;
font-size: 14px;
color: rgb(7, 17, 27);
}
.empty {
float: right;
font-size: 12px;
color: rgb(0, 160, 220);
}
}
.list-content {
padding: 0 18px;
max-height: 217px;
overflow: hidden;
background: #fff;
.food {
display: flex;
align-items: center;
position: relative;
padding: 12px 0;
box-sizing: border-box;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid rgba(7, 17, 27, 0.1);
content: " ";
}
.name {
line-height: 24px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.price {
position: absolute;
right: 90px;
bottom: 12px;
line-height: 24px;
font-size: 14px;
font-weight: 700;
color: rgb(240, 20, 20);
}
.cartcontrol-wrapper {
position: absolute;
right: 0;
}
}
}
}
}
</style>
pages/newsDetail/components/header.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shop-header">
<div class="head">
<nav :style="`background-image: url('${banner}');`">
<i
class="mintui mintui-back"
@click="$router.go(-1);"/>
<img
:src="seller.avatar"
class="shop-logo">
</nav>
</div>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.shop-header {
background: #fff;
.head {
height: px2rem(200px);
nav {
height: px2rem(200px);
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
padding: px2rem(10px);
position: relative;
.mintui-back {
font-size: px2rem(46px);
color: #fff;
}
.shop-logo {
width: px2rem(150px);
height: px2rem(150px);
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
}
}
.content {
font-size: px2rem(24px);
margin-top: px2rem(50px);
text-align: center;
h2 {
font-size: px2rem(40px);
}
.info {
color: #666;
span {
margin: 0 px2rem(10px);
}
}
}
.foot {
padding: 0 px2rem(70px);
margin-top: 10px;
font-size: px2rem(24px);
.mint-badge {
transform: scale(0.8) translateX(-10%);
border-radius: 1px;
}
.announcement {
display: inline-block;
width: 100%;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
pages/newsDetail/components/ratings/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratings-page">
<div class="ratings-content">
<div class="overview">
<div class="overview-left">
<h1 class="score">{{ seller.score }}</h1>
<div class="title">
商家评分
<rating-star :rating="seller.score" />
</div>
</div>
<div class="overview-right">
<div class="score-wrapper">
<span class="title">味道</span>
<p class="score">{{ seller.serviceScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">包装</span>
<p class="score">{{ seller.foodScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">配送</span>
<p class="score">{{ seller.deliveryTime }}</p>
</div>
</div>
</div>
<div class="placeholder"/>
<ratingselect
:select-type="selectType"
:only-content="onlyContent"
:ratings="ratings"
@select="selectRating"
@toggle="toggleContent" />
<div class="rating-wrapper">
<ul>
<li
v-for="(rating, index) in ratings"
v-show="needShow(rating.rateType, rating.text)"
:key="index"
class="rating-item">
<div class="avatar">
<span :style="'background-position: 0 '+rating.avatar"/>
</div>
<div class="content">
<h1 class="name">{{ rating.username }}</h1>
<div class="star-wrapper">
<rating-star
:size="24"
:rating="rating.score" />
</div>
<p class="text">{{ rating.text }}</p>
<div
v-show="rating.recommend && rating.recommend.length"
class="recommend">
<span
v-for="(item, index) in rating.recommend"
:key="index"
class="item">{{ item }}</span>
</div>
<div class="time">
{{ rating.rateTime }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import ratingStar from "~/components/ratingStar";
import ratingselect from "./ratingselect";
import * as shoppingApi from "~/assets/services/shopping";
import moment from "moment";
export default {
components: {
ratingStar,
ratingselect
},
props: {
seller: {
default: {}
}
},
data() {
return {
ratings: [],
selectType: 2,
onlyContent: true
};
},
mounted() {
shoppingApi.ratings().then(res => {
if (res.code === 0) {
this.ratings = res.data;
this.ratings.map(item => {
item.rateTime = moment(item.rateTime).format("YYYY/M/D");
});
}
});
},
methods: {
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === 2) {
return true;
} else {
return type === this.selectType;
}
},
selectRating(type) {
this.selectType = type;
},
toggleContent() {
this.onlyContent = !this.onlyContent;
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.ratings-page {
background: #fff;
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
.overview {
display: flex;
padding: 18px 0;
.overview-left {
width: px2rem(340px);
@include fj(center);
align-items: center;
text-align: center;
.score {
font-size: px2rem(80px);
margin-right: px2rem(20px);
color: #ff6000;
font-weight: 400;
}
.title {
font-size: 12px;
}
}
.overview-right {
flex: 1;
@include fj(space-around);
align-items: center;
text-align: center;
color: #666;
.score-wrapper {
.title {
display: inline-block;
}
.score {
font-size: px2rem(40px);
}
}
}
}
.rating-wrapper {
padding: 0 18px;
.rating-item {
display: flex;
padding: 18px 0;
.avatar {
flex: 0 0 28px;
width: 28px;
margin-right: 12px;
span {
border-radius: 50%;
display: inline-block;
width: 30px;
height: 30px;
background: url("../../../../assets/images/sprite-avatar.png");
background-position: 0 0;
background-size: 30px;
}
}
.content {
position: relative;
flex: 1;
font-size: px2rem(28px);
.name {
margin-bottom: 4px;
line-height: 12px;
color: rgb(7, 17, 27);
}
.star-wrapper {
margin-bottom: 6px;
.star {
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
}
.text {
margin: 8px 0;
line-height: 18px;
color: rgb(7, 17, 27);
}
.recommend {
line-height: 16px;
font-size: 0;
.icon-thumb_up,
.item {
display: inline-block;
margin: 0 8px 4px 0;
font-size: 9px;
}
.icon-thumb_up {
color: rgb(0, 160, 220);
}
.item {
padding: 0 6px;
border: 1px solid rgba(7, 17, 27, 0.1);
border-radius: 1px;
color: rgb(147, 153, 159);
background: #fff;
}
}
.time {
position: absolute;
top: 0;
right: 0;
line-height: 12px;
font-size: 10px;
color: rgb(147, 153, 159);
}
}
}
}
}
</style>
pages/newsDetail/components/ratings/ratingselect.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratingselect">
<div class="rating-type border-1px">
<span
:class="{'active':selectType===2}"
class="block positive"
@click="select(2,$event)">{{ desc.all }}
<span class="count">{{ ratings.length }}</span>
</span>
<span
:class="{'active':selectType===0}"
class="block positive"
@click="select(0,$event)">{{ desc.positive }}<span
class="count">{{ positives.length }}</span></span>
<span
:class="{'active':selectType===1}"
class="block negative"
@click="select(1,$event)">{{ desc.negative }}<span
class="count">{{ negatives.length }}</span></span>
</div>
<div
:class="{'on':onlyContent}"
class="switch"
@click="toggleContent">
<!-- <span class="icon-check_circle"></span> -->
<svg
width="12"
height="12"
class="check">
<use xlink:href="#select"/>
</svg>
<span class="text">只看有内容的评价</span>
</div>
</div>
</template>
<script>
export default {
props: {
ratings: {
type: Array,
default () {
return [];
}
},
selectType: {
type: Number,
default: 2
},
onlyContent: {
type: Boolean,
default: false
},
desc: {
type: Object,
default () {
return {
all: "全部",
positive: "满意",
negative: "不满意"
};
}
}
},
computed: {
positives() {
return this.ratings.filter(rating => {
return rating.rateType === 0;
});
},
negatives() {
return this.ratings.filter(rating => {
return rating.rateType === 1;
});
}
},
methods: {
select(type, event) {
this.$emit("select", type);
},
toggleContent(event) {
this.$emit("toggle");
}
}
};
</script>
<style lang="scss">
.ratingselect {
.rating-type {
padding: 18px 0;
margin: 0 18px;
font-size: 0;
.block {
display: inline-block;
padding: 8px 12px;
margin-right: 8px;
line-height: 16px;
border-radius: 1px;
font-size: 12px;
color: rgb(77, 85, 93);
&.active {
color: #fff;
}
.count {
margin-left: 2px;
font-size: 12px;
}
&.positive {
background: rgba(0, 160, 220, 0.2);
&.active {
background: rgb(0, 160, 220);
}
}
&.negative {
background: rgba(77, 85, 93, 0.2);
&.active {
background: rgb(77, 85, 93);
}
}
}
}
.switch {
display: flex;
align-items: center;
padding: 12px 18px;
line-height: 24px;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
color: rgb(147, 153, 159);
font-size: 0;
svg {
margin-right: 5px;
fill: #e8e8e8;
}
&.on {
.check {
fill: #76d572;
}
}
.icon-check_circle {
display: inline-block;
vertical-align: top;
margin-right: 4px;
font-size: 24px;
}
.text {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
}
}
</style>
pages/newsDetail/components/seller.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="seller-page">
<div class="logo">
<img
:src="banner"
alt="">
</div>
<h2>{{ seller.name }}</h2>
<p>{{ seller.bulletin }}</p>
<a
:href="seller.brandstory"
class="brandstory">查看品牌故事</a>
<div class="placeholder"/>
<h2>配送信息</h2>
<p>由蜂鸟快送提供配送，约{{ seller.deliveryTime }}分钟送达，距离2.1km</p>
<p>配送费￥{{ seller.deliveryPrice }}</p>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.seller-page {
background: #fff;
padding-bottom: px2rem(30px);
.logo {
padding: px2rem(30px) px2rem(30px) 0 px2rem(30px);
}
h2 {
font-size: px2rem(32px);
margin-top: px2rem(40px);
padding: 0 px2rem(30px) px2rem(20px) px2rem(30px);
}
p {
padding: 0 px2rem(30px);
color: #666;
font-size: px2rem(26px);
line-height: 1.5;
}
.brandstory {
display: block;
line-height: px2rem(100px);
margin-top: px2rem(50px);
color: #666;
font-size: px2rem(28px);
text-align: center;
}
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
}
</style>
pages/newsDetail/index.vue
View file @ a0b1923b
<template> <template>
<div class="shop-page"> <div
<Header :seller="seller" /> class="news-detail-page"
<mt-navbar v-model="selected"> style="margin-top:1.87733rem;">
<mt-tab-item id="goods">点餐</mt-tab-item> <Head/>
<mt-tab-item id="ratings">评价</mt-tab-item> <div class="main-padding">
<mt-tab-item id="seller">商家</mt-tab-item> <div>
</mt-navbar> <h1 class="news-detail-name">{{ detail.title }}</h1>
<mt-tab-container v-model="selected"> <div class="news-detail-time flex-aic">
<mt-tab-container-item id="goods"> <img
<Goods :seller="seller" /> src="https://mgmt.dfangche.com/xxfccn/image/1/article/1559698961339.jpeg"
</mt-tab-container-item> style="width: 17px;height: 17px;margin-right: 7px;">
<mt-tab-container-item id="ratings"> {{ detail.addTime.substring(0, 10) }}</div>
<Ratings :seller="seller" /> <div
</mt-tab-container-item> class="content-detail"
<mt-tab-container-item id="seller"> v-html="detail.text"/>
<Seller :seller="seller" /> <div class="more-news flex-aic-jcb">
</mt-tab-container-item> <div class="more-news-l">
</mt-tab-container> 推荐咨讯
</div>
<router-link
:to="{ path: 'news'}"
class="more-news-r">更多</router-link>
</div>
<ul>
<router-link
v-for="item in hotList"
:to="{ path: 'newsDetailHot', query:{id: item.id }}"
:key="item.id"
class="flex-jcb"
style="margin-bottom: 20px;">
<img
:src="item.coverImage"
class="news-img-list">
<div class="news-list">
<div class="ellipsis2 news-list-title">{{ item.title }}</div>
<div class="epitome news-list-time flex-aic">
<img
:src="item.coverImage"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ item.addTime.substring(0, 10) }}</div>
</div>
</router-link>
</ul>
</div>
</div>
<go-top/>
<Footer/>
</div> </div>
</template> </template>
<script> <script>
import Header from "./components/header"; import axios from '../../plugins/axios'
import Goods from "./components/goods"; import Head from "~/components/head";
import Ratings from "./components/ratings"; import DetailBanner from '~/components/detailBanner'
import Seller from "./components/seller"; import GoTop from "~/components/goTop";
import * as shoppingApi from "~/assets/services/shopping"; import Footer from "~/components/footer";
export default { export default {
components: { components: {
Header, Head,
Goods, DetailBanner,
Ratings, GoTop,
Seller Footer
}, },
data() { data() {
return { return {};
selected: "goods",
seller: {}
};
},
async asyncData() {
const {
data
} = await shoppingApi.seller();
return {
seller: data
};
}, },
created() { async asyncData({ route }) {
// vue resource const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+route.query.id+"&urlType=1");
// this.$http.get('api/seller').then((res) => { let detail = data.data;
// res = res.body; let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+route.query.id);
// if(res.errno === ERR_OK){ let hot = tempBannerData.data.data;
// this.seller = res.data; return {detail: detail, hotList: hot}
// console.log(this.seller);
// }
// })
}, },
created() {},
methods: {},
}; };
</script> </script>
...@@ -65,37 +82,49 @@ ...@@ -65,37 +82,49 @@
<style lang="scss"> <style lang="scss">
@import "../../assets/styles/mixin"; @import "../../assets/styles/mixin";
.shop-page { .news-detail-page {
font-size: px2rem(24px); font-size: px2rem(26px);
.news-detail-name{
.mint-navbar { font-size: 17px;
position: sticky; font-weight: bold;
top: 0;
z-index: 20;
.mint-tab-item-label {
font-size: px2rem(30px);
} }
.news-detail-time{
.mint-tab-item { padding: 15px 0 20px 0;
padding: 10px 0; border-bottom: 1px solid #dfdfdf;
color: #999;
&.is-selected { font-size: 13px;
color: inherit; }
border: none; .news-img-list{
position: relative; width: 92px;
height: 75px;
&::after { border-radius: 3px;
content: " "; }
display: inline-block; .news-list {
@include wh(20%, 2px); border-bottom: 1px solid #dfdfdf;
background: #2395ff; width: 100%;
position: absolute; display: flex;
bottom: 0; flex-direction: column;
left: 50%; justify-content: space-between;
transform: translateX(-50%); margin-left: 13px;
padding-bottom: 13px;
}
.news-list-title{
margin-bottom: 15px;
font-size: 15px;
}
.news-list-time{
font-size: 13px;
color: #999;
} }
.more-news{
margin: 17px 0;
.more-news-l{
font-size: 17px;
font-weight: bold;
} }
.more-news-r{
font-size: 14px;
color: #999;
} }
} }
} }
......
pages/newsDetailHot/index.vue 0 → 100644
View file @ a0b1923b
<template>
<div
class="news-detail-page"
style="margin-top:1.87733rem;">
<Head/>
<div class="detail-main-container main-padding">
<div>
<h1 class="news-detail-name">{{ detail.title }}</h1>
<div class="news-detail-time flex-aic">
<img
src="https://mgmt.dfangche.com/xxfccn/image/1/article/1559698961339.jpeg"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ detail.addTime.substring(0, 10) }}</div>
<div
class="content-detail"
v-html="detail.text"/>
<div class="more-news flex-aic-jcb">
<div class="more-news-l">
推荐咨讯
</div>
<router-link
:to="{ path: 'news'}"
class="more-news-r">更多</router-link>
</div>
<ul
class="main-padding">
<router-link
v-for="item in hotList"
:to="{ path: 'newsDetail', query:{id: item.id }}"
:key="item.id"
class="flex-jcb"
style="margin-bottom: 20px;">
<img
:src="item.coverImage"
class="news-img-list">
<div class="news-list">
<div class="ellipsis2 news-list-title">{{ item.title }}</div>
<!--<div class="ellipsis2 epitome">导语：{{ item.epitome }}</div>-->
<div class="epitome news-list-time flex-aic">
<img
:src="item.coverImage"
style="width: 17px;height: 17px;margin-right: 7px;">
{{ item.addTime.substring(0, 10) }}</div>
</div>
</router-link>
</ul>
</div>
</div>
<go-top/>
</div>
</template>
<script>
import axios from '../../plugins/axios'
import Head from "~/components/head";
import DetailBanner from '~/components/detailBanner'
import GoTop from "~/components/goTop";
export default {
components: {
Head,
DetailBanner,
GoTop
},
data() {
return {};
},
async asyncData({ route }) {
const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+route.query.id+"&urlType=1");
let detail = data.data;
let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+route.query.id);
let hot = tempBannerData.data.data;
return {detail: detail, hotList: hot}
},
created() {},
methods: {},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.news-detail-page {
font-size: px2rem(26px);
.news-detail-name{
font-size: 17px;
font-weight: bold;
}
.news-detail-time{
padding: 15px 0 20px 0;
border-bottom: 1px solid #dfdfdf;
color: #999;
font-size: 13px;
}
.news-img-list{
width: 92px;
height: 75px;
border-radius: 3px;
}
.news-list {
border-bottom: 1px solid #dfdfdf;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 13px;
padding-bottom: 13px;
}
.news-list-title{
margin-bottom: 15px;
font-size: 15px;
}
.news-list-time{
font-size: 13px;
color: #999;
}
.more-news{
margin: 17px 0;
.more-news-l{
font-size: 17px;
font-weight: bold;
}
.more-news-r{
font-size: 14px;
color: #999;
}
}
}
</style>
pages/shop/components/goods/cartcontrol.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="cartcontrol">
<svg
v-show="food.count>0"
class="inner"
fill="rgb(35, 149, 255)"
@click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
<div
v-show="food.count>0"
class="cart-count">{{ food.count }}</div>
<svg
width="24"
height="24"
fill="rgb(35, 149, 255)"
@click="addCart"><use xlink:href="#cart-add"/></svg>
</div>
</template>
<script>
import Vue from "vue";
export default {
props: ['food'],
methods: {
addCart(event) {
if (!this.food.count) {
Vue.set(this.food, "count", 1);
} else {
this.food.count++;
}
this.$emit("add", event.target);
},
decreaseCart(event) {
if (this.food.count) {
this.food.count--;
}
}
}
};
</script>
<style lang="scss">
.cartcontrol {
display: flex;
align-items: center;
.inner {
width: 24px;
height: 24px;
}
.cart-count {
display: inline-block;
vertical-align: top;
width: 25px;
text-align: center;
font-size: 15px;
color: #333;
}
.cart-add {
display: inline-block;
padding: 6px;
line-height: 24px;
font-size: 24px;
color: rgb(0, 160, 220);
}
}
</style>
pages/shop/components/goods/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="goods-page">
<div class="menu-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
:class="{'current':currentIndex === index}"
class="menu-item"
@click="selectMenu(index,$event)">
<span class="text">
<!-- <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span> -->
{{ item.name }}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper">
<ul>
<li
v-for="(item, index) in goods"
:key="index"
class="food-list food-list-hook">
<h1
:id="'a'+index"
class="title">{{ item.name }}</h1>
<ul>
<li
v-for="(food, index) in item.foods"
:key="index"
class="food-item border-1px">
<div class="icon">
<img :src="food.icon" >
</div>
<div class="content">
<h2 class="name">{{ food.name }}</h2>
<p class="desc">{{ food.description }}</p>
<div class="extra">
<span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
</div>
<div class="price">
<span class="now">￥<b>{{ food.price }}</b></span>
<cartcontrol :food="food" />
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<shopcart
ref="shopcart"
:select-foods="selectFoods"
:delivery-price="seller.deliveryPrice"
:min-price="seller.minPrice"/>
</div>
</template>
<script>
import shopcart from "./shopcart";
import cartcontrol from "./cartcontrol";
import * as shoppingApi from "~/assets/services/shopping";
export default {
components: {
shopcart,
cartcontrol
},
props: {
seller: {
default: {}
}
},
data() {
return {
goods: [],
listHeight: [],
scrollY: 0,
classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
currentIndex: 0,
isScroll: false
};
},
computed: {
selectFoods() {
let foods = [];
this.goods.forEach(good => {
good.foods.forEach(food => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
},
created() {},
mounted() {
shoppingApi.goods().then(res => {
if (res.code === 0) {
this.goods = res.data;
}
});
//菜品滚动选择类目
document.querySelector(".foods-wrapper").addEventListener(
"scroll",
this.throttle(() => {
// 防止手动选择的时候误操作
if (this.isScroll) {
return;
}
this.goods.map((item, index) => {
const rect_top = document
.querySelector("#a" + index)
.getBoundingClientRect().top;
const container_top = document
.querySelector(".foods-wrapper")
.getBoundingClientRect().top;
if (
rect_top - container_top < 100 &&
rect_top - container_top > -100
) {
this.currentIndex = index;
}
});
}, 50)
);
},
methods: {
selectMenu(index) {
if (index === this.currentIndex) {
return;
}
this.currentIndex = index;
this.animateScroll("#a" + index, ".foods-wrapper", 50);
},
// 平滑滚动方法
animateScroll(element, container, speed) {
this.isScroll = true;
let rect =
document.querySelector(element).getBoundingClientRect().top -
document.querySelector(container).getBoundingClientRect().top;
//获取元素相对窗口的top值，此处应加上窗口本身的偏移
let top = rect + document.querySelector(container).scrollTop;
let currentTop = 0;
let requestId;
//采用requestAnimationFrame，平滑动画
const step = timestamp => {
if (currentTop <= top) {
document.querySelector(container).scrollTo(0, currentTop);
requestId = window.requestAnimationFrame(step);
} else {
window.cancelAnimationFrame(requestId);
this.isScroll = false;
}
currentTop += speed;
};
window.requestAnimationFrame(step);
},
// 函数防抖
throttle(method, delay) {
var timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
method.apply(this, arguments);
}, delay);
};
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.goods-page {
display: flex;
background: #fff;
width: 100%;
.menu-wrapper {
flex: 0 0 80px;
width: 80px;
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #f8f8f8;
.menu-item {
display: table;
height: 54px;
padding: 0 12px;
line-height: 14px;
&.current {
position: relative;
margin-top: -1px;
z-index: 10;
background: #ffffff;
.text {
color: #333;
}
}
.icon {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
margin-right: 2px;
background-size: 12px 12px;
background-repeat: no-repeat;
// &.decrease {
// bg-image('decrease_3');
// }
// &.discount {
// bg-image('discount_3');
// }
// &.guarantee {
// bg-image('guarantee_3');
// }
// &.invoice {
// bg-image('invoice_3');
// }
// &.special {
// bg-image('special_3');
// }
}
.text {
display: table-cell;
width: 56px;
vertical-align: middle;
font-size: 12px;
position: relative;
color: #666;
}
}
}
.foods-wrapper {
width: calc(100vw - 80px);
height: calc(100vh - 38px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 60px;
.title {
padding-left: 14px;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #666;
}
.food-item {
display: flex;
margin: 10px;
padding-bottom: 18px;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
content: " ";
}
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
.icon {
flex: 0 0 80px;
margin-right: 10px;
}
.content {
flex: 1;
position: relative;
.name {
margin: 2px 0 8px 0px;
height: 14px;
line-height: 14px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.desc,
.extra {
line-height: 10px;
font-size: 12px;
color: rgb(147, 153, 159);
transform: scale(0.9) translateX(-6%);
}
.desc {
margin-bottom: 8px;
line-height: 12px;
max-width: px2rem(350px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.extra {
.count {
margin-right: 12px;
}
}
.price {
width: 100%;
font-weight: 700;
position: absolute;
bottom: 0;
@include fj(space-between);
.now {
margin-right: 8px;
font-size: 14px;
color: rgb(255, 83, 57);
}
.old {
text-decoration: line-through;
font-size: 10px;
color: rgb(147, 153, 159);
}
b {
font-weight: normal;
font-size: 18px;
}
}
}
}
}
}
</style>
pages/shop/components/goods/shopcart.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shopcart">
<div
class="content"
@click="toggleList">
<div class="content-left">
<div class="logo-wrapper">
<div
:class="{'highlight':totalCount>0}"
class="logo">
<span
v-if="totalCount<=0"
class="icon-shopping_cart">
<img
src="~/assets/images/cart.svg"
alt="">
</span>
<span
v-else
class="icon-shopping_cart highlight">
<img
src="~/assets/images/cart2.svg"
alt="">
</span>
</div>
<div
v-show="totalCount>0"
class="num">{{ totalCount }}</div>
</div>
<div
:class="{'highlight':totalPrice>0}"
class="price">￥{{ totalPrice }}元</div>
<div class="desc">另需配送费￥{{ deliveryPrice }}元</div>
</div>
<div class="content-right">
<div
:class="payClass"
class="pay">{{ payDesc }}</div>
</div>
</div>
<div class="ball-container">
<div
v-for="(ball, index) in balls"
:key="index">
<transition
name="drop"
@before-enter="beforeDrop"
@enter="dropping"
@after-enter="afterDrop">
<div
v-show="ball.show"
class="ball">
<div class="inner inner-hook"/>
</div>
</transition>
</div>
</div>
<div
v-show="listShow"
class="mark"
@click="toggleList"/>
<transition name="fold">
<div
v-show="listShow"
class="shopcart-list">
<div class="list-header">
<h1 class="title">已选商品</h1>
<span
class="empty"
@click="empty">清空</span>
</div>
<div
ref="listContent"
class="list-content">
<ul>
<li
v-for="(food, index) in selectFoods"
:key="index"
class="food">
<span class="name">{{ food.name }}</span>
<div class="price">
<span>￥{{ food.price*food.count }}</span>
</div>
<div class="cartcontrol-wrapper">
<cartcontrol
:food="food"
@add="addFood"/>
</div>
</li>
</ul>
</div>
</div>
</transition>
</div>
</template>
<script>
import cartcontrol from "./cartcontrol";
export default {
components: {
cartcontrol
},
props: {
selectFoods: {
type: Array,
default () {
return [];
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
}
},
data() {
return {
balls: [{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
}
],
dropBalls: [],
fold: true
};
},
computed: {
totalPrice() {
let total = 0;
this.selectFoods.forEach(food => {
total += food.price * food.count;
});
return total;
},
totalCount() {
let count = 0;
this.selectFoods.forEach(food => {
count += food.count;
});
return count;
},
payDesc() {
if (this.totalPrice === 0) {
return `¥${this.minPrice}元起送`;
} else if (this.totalPrice < this.minPrice) {
let diff = this.minPrice - this.totalPrice;
return `还差¥${diff}元起送`;
} else {
return "去结算";
}
},
payClass() {
if (this.totalPrice < this.minPrice) {
return "not-enough";
} else {
return "enough";
}
},
listShow() {
if (!this.totalCount) {
return false;
}
return !this.fold;
}
},
methods: {
toggleList() {
if (!this.totalCount) {
return;
}
this.fold = !this.fold;
},
hideList() {
this.fold = true;
},
empty() {
this.selectFoods.forEach(food => {
food.count = 0;
});
},
pay() {
if (this.totalPrice < this.minPrice) {
return;
}
window.alert(`支付${this.totalPrice}元`);
},
addFood(target) {
this.drop(target);
},
drop(el) {
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return;
}
}
},
beforeDrop(el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect();
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.display = "";
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
dropping(el, done) {
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = "translate3d(0,0,0)";
el.style.transform = "translate3d(0,0,0)";
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = "translate3d(0,0,0)";
inner.style.transform = "translate3d(0,0,0)";
el.addEventListener("transitionend", done);
});
},
afterDrop(el) {
let ball = this.dropBalls.shift();
if (ball) {
ball.show = false;
el.style.display = "none";
}
}
},
};
</script>
<style lang="scss">
.shopcart {
position: fixed;
left: 0;
bottom: 0;
z-index: 50;
width: 100%;
height: 48px;
background: #000;
.content {
display: flex;
background: rgba(61, 61, 63, 0.9);
font-size: 0;
color: rgba(255, 255, 255, 0.4);
.content-left {
flex: 1;
.logo-wrapper {
display: inline-block;
vertical-align: top;
position: relative;
top: -10px;
margin: 0 12px;
padding: 6px;
width: 56px;
height: 56px;
box-sizing: border-box;
border-radius: 50%;
background-image: radial-gradient(circle, #363636 6.266667vw, #444 0);
.logo {
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
background: #2b343c;
&.highlight {
background: rgb(0, 160, 220);
}
.icon-shopping_cart {
margin: 0 auto;
padding: 20% 0;
display: block;
width: 60%;
height: 60%;
color: #80858a;
}
}
.num {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 16px;
font-size: 9px;
font-weight: 700;
color: #ffffff;
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(-90deg, #ff7416, #ff3c15 98%);
}
}
.price {
display: inline-block;
vertical-align: top;
margin-top: 12px;
line-height: 24px;
padding-right: 12px;
box-sizing: border-box;
border-right: 1px solid rgba(255, 255, 255, 0.1);
font-size: 16px;
font-weight: 700;
&.highlight {
color: #fff;
}
}
.desc {
display: inline-block;
vertical-align: top;
margin: 12px 0 0 12px;
line-height: 24px;
font-size: 10px;
}
}
.content-right {
flex: 0 0 105px;
width: 105px;
.pay {
height: 48px;
line-height: 48px;
text-align: center;
font-size: 14px;
font-weight: 700;
&.not-enough {
color: #fff;
}
&.enough {
background: #00b43c;
color: #fff;
}
}
}
}
.ball-container {
.ball {
position: fixed;
left: 32px;
bottom: 22px;
z-index: 200;
&.drop-transition {
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
.inner {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(0, 160, 220);
transition: all 0.4s;
}
}
}
}
.mark {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: -2;
}
.shopcart-list {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
transform: translate3d(0, -100%, 0);
&.fold-enter-active,
&.fold-leave-active {
transition: all 0.5s;
}
&.fold-enter,
&.fold-leave-active {
transform: translate3d(0, 0, 0);
}
.list-header {
height: 40px;
line-height: 40px;
padding: 0 18px;
background: #f3f5f7;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
.title {
float: left;
font-size: 14px;
color: rgb(7, 17, 27);
}
.empty {
float: right;
font-size: 12px;
color: rgb(0, 160, 220);
}
}
.list-content {
padding: 0 18px;
max-height: 217px;
overflow: hidden;
background: #fff;
.food {
display: flex;
align-items: center;
position: relative;
padding: 12px 0;
box-sizing: border-box;
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid rgba(7, 17, 27, 0.1);
content: " ";
}
.name {
line-height: 24px;
font-size: 14px;
color: rgb(7, 17, 27);
}
.price {
position: absolute;
right: 90px;
bottom: 12px;
line-height: 24px;
font-size: 14px;
font-weight: 700;
color: rgb(240, 20, 20);
}
.cartcontrol-wrapper {
position: absolute;
right: 0;
}
}
}
}
}
</style>
pages/shop/components/header.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shop-header">
<div class="head">
<nav :style="`background-image: url('${banner}');`">
<i
class="mintui mintui-back"
@click="$router.go(-1);"/>
<img
:src="seller.avatar"
class="shop-logo">
</nav>
</div>
<div class="content">
<h2>{{ seller.name }}</h2>
<div class="info">
<span>评价{{ seller.score }}</span>
<span>月售{{ seller.sellCount }}单</span>
<span>蜂鸟快送约{{ seller.deliveryTime }}分钟</span>
</div>
</div>
<div class="foot">
<p>
<mt-badge
size="small"
color="rgb(240, 115, 115)">满减</mt-badge>
满36减21，满50减26，满80减44
</p>
<span class="announcement">公告：专注汉堡品牌，华莱士简单有滋味，本店位于：金港路183号。如果您的美食凉了，或者口味不好，错送，漏送等，请及时联系我们：18385528274，如您对我们的送餐服务口味满意请给5星好评哟，谢谢！我们将竭诚为您服务！</span>
</div>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.shop-header {
background: #fff;
.head {
height: px2rem(200px);
nav {
height: px2rem(200px);
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
padding: px2rem(10px);
position: relative;
.mintui-back {
font-size: px2rem(46px);
color: #fff;
}
.shop-logo {
width: px2rem(150px);
height: px2rem(150px);
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
}
}
.content {
font-size: px2rem(24px);
margin-top: px2rem(50px);
text-align: center;
h2 {
font-size: px2rem(40px);
}
.info {
color: #666;
span {
margin: 0 px2rem(10px);
}
}
}
.foot {
padding: 0 px2rem(70px);
margin-top: 10px;
font-size: px2rem(24px);
.mint-badge {
transform: scale(0.8) translateX(-10%);
border-radius: 1px;
}
.announcement {
display: inline-block;
width: 100%;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
pages/shop/components/ratings/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratings-page">
<div class="ratings-content">
<div class="overview">
<div class="overview-left">
<h1 class="score">{{ seller.score }}</h1>
<div class="title">
商家评分
<rating-star :rating="seller.score" />
</div>
</div>
<div class="overview-right">
<div class="score-wrapper">
<span class="title">味道</span>
<p class="score">{{ seller.serviceScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">包装</span>
<p class="score">{{ seller.foodScore }}</p>
</div>
<div class="score-wrapper">
<span class="title">配送</span>
<p class="score">{{ seller.deliveryTime }}</p>
</div>
</div>
</div>
<div class="placeholder"/>
<ratingselect
:select-type="selectType"
:only-content="onlyContent"
:ratings="ratings"
@select="selectRating"
@toggle="toggleContent" />
<div class="rating-wrapper">
<ul>
<li
v-for="(rating, index) in ratings"
v-show="needShow(rating.rateType, rating.text)"
:key="index"
class="rating-item">
<div class="avatar">
<span :style="'background-position: 0 '+rating.avatar"/>
</div>
<div class="content">
<h1 class="name">{{ rating.username }}</h1>
<div class="star-wrapper">
<rating-star
:size="24"
:rating="rating.score" />
</div>
<p class="text">{{ rating.text }}</p>
<div
v-show="rating.recommend && rating.recommend.length"
class="recommend">
<span
v-for="(item, index) in rating.recommend"
:key="index"
class="item">{{ item }}</span>
</div>
<div class="time">
{{ rating.rateTime }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import ratingStar from "~/components/ratingStar";
import ratingselect from "./ratingselect";
import * as shoppingApi from "~/assets/services/shopping";
import moment from "moment";
export default {
components: {
ratingStar,
ratingselect
},
props: {
seller: {
default: {}
}
},
data() {
return {
ratings: [],
selectType: 2,
onlyContent: true
};
},
mounted() {
shoppingApi.ratings().then(res => {
if (res.code === 0) {
this.ratings = res.data;
this.ratings.map(item => {
item.rateTime = moment(item.rateTime).format("YYYY/M/D");
});
}
});
},
methods: {
needShow(type, text) {
if (this.onlyContent && !text) {
return false;
}
if (this.selectType === 2) {
return true;
} else {
return type === this.selectType;
}
},
selectRating(type) {
this.selectType = type;
},
toggleContent() {
this.onlyContent = !this.onlyContent;
}
},
};
</script>
<style lang="scss">
@import "../../../../assets/styles/mixin";
.ratings-page {
background: #fff;
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
.overview {
display: flex;
padding: 18px 0;
.overview-left {
width: px2rem(340px);
@include fj(center);
align-items: center;
text-align: center;
.score {
font-size: px2rem(80px);
margin-right: px2rem(20px);
color: #ff6000;
font-weight: 400;
}
.title {
font-size: 12px;
}
}
.overview-right {
flex: 1;
@include fj(space-around);
align-items: center;
text-align: center;
color: #666;
.score-wrapper {
.title {
display: inline-block;
}
.score {
font-size: px2rem(40px);
}
}
}
}
.rating-wrapper {
padding: 0 18px;
.rating-item {
display: flex;
padding: 18px 0;
.avatar {
flex: 0 0 28px;
width: 28px;
margin-right: 12px;
span {
border-radius: 50%;
display: inline-block;
width: 30px;
height: 30px;
background: url("../../../../assets/images/sprite-avatar.png");
background-position: 0 0;
background-size: 30px;
}
}
.content {
position: relative;
flex: 1;
font-size: px2rem(28px);
.name {
margin-bottom: 4px;
line-height: 12px;
color: rgb(7, 17, 27);
}
.star-wrapper {
margin-bottom: 6px;
.star {
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
}
.text {
margin: 8px 0;
line-height: 18px;
color: rgb(7, 17, 27);
}
.recommend {
line-height: 16px;
font-size: 0;
.icon-thumb_up,
.item {
display: inline-block;
margin: 0 8px 4px 0;
font-size: 9px;
}
.icon-thumb_up {
color: rgb(0, 160, 220);
}
.item {
padding: 0 6px;
border: 1px solid rgba(7, 17, 27, 0.1);
border-radius: 1px;
color: rgb(147, 153, 159);
background: #fff;
}
}
.time {
position: absolute;
top: 0;
right: 0;
line-height: 12px;
font-size: 10px;
color: rgb(147, 153, 159);
}
}
}
}
}
</style>
pages/shop/components/ratings/ratingselect.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="ratingselect">
<div class="rating-type border-1px">
<span
:class="{'active':selectType===2}"
class="block positive"
@click="select(2,$event)">{{ desc.all }}
<span class="count">{{ ratings.length }}</span>
</span>
<span
:class="{'active':selectType===0}"
class="block positive"
@click="select(0,$event)">{{ desc.positive }}<span
class="count">{{ positives.length }}</span></span>
<span
:class="{'active':selectType===1}"
class="block negative"
@click="select(1,$event)">{{ desc.negative }}<span
class="count">{{ negatives.length }}</span></span>
</div>
<div
:class="{'on':onlyContent}"
class="switch"
@click="toggleContent">
<!-- <span class="icon-check_circle"></span> -->
<svg
width="12"
height="12"
class="check">
<use xlink:href="#select"/>
</svg>
<span class="text">只看有内容的评价</span>
</div>
</div>
</template>
<script>
export default {
props: {
ratings: {
type: Array,
default () {
return [];
}
},
selectType: {
type: Number,
default: 2
},
onlyContent: {
type: Boolean,
default: false
},
desc: {
type: Object,
default () {
return {
all: "全部",
positive: "满意",
negative: "不满意"
};
}
}
},
computed: {
positives() {
return this.ratings.filter(rating => {
return rating.rateType === 0;
});
},
negatives() {
return this.ratings.filter(rating => {
return rating.rateType === 1;
});
}
},
methods: {
select(type, event) {
this.$emit("select", type);
},
toggleContent(event) {
this.$emit("toggle");
}
}
};
</script>
<style lang="scss">
.ratingselect {
.rating-type {
padding: 18px 0;
margin: 0 18px;
font-size: 0;
.block {
display: inline-block;
padding: 8px 12px;
margin-right: 8px;
line-height: 16px;
border-radius: 1px;
font-size: 12px;
color: rgb(77, 85, 93);
&.active {
color: #fff;
}
.count {
margin-left: 2px;
font-size: 12px;
}
&.positive {
background: rgba(0, 160, 220, 0.2);
&.active {
background: rgb(0, 160, 220);
}
}
&.negative {
background: rgba(77, 85, 93, 0.2);
&.active {
background: rgb(77, 85, 93);
}
}
}
}
.switch {
display: flex;
align-items: center;
padding: 12px 18px;
line-height: 24px;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
color: rgb(147, 153, 159);
font-size: 0;
svg {
margin-right: 5px;
fill: #e8e8e8;
}
&.on {
.check {
fill: #76d572;
}
}
.icon-check_circle {
display: inline-block;
vertical-align: top;
margin-right: 4px;
font-size: 24px;
}
.text {
display: inline-block;
vertical-align: top;
font-size: 12px;
}
}
}
</style>
pages/shop/components/seller.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="seller-page">
<div class="logo">
<img
:src="banner"
alt="">
</div>
<h2>{{ seller.name }}</h2>
<p>{{ seller.bulletin }}</p>
<a
:href="seller.brandstory"
class="brandstory">查看品牌故事</a>
<div class="placeholder"/>
<h2>配送信息</h2>
<p>由蜂鸟快送提供配送，约{{ seller.deliveryTime }}分钟送达，距离2.1km</p>
<p>配送费￥{{ seller.deliveryPrice }}</p>
</div>
</template>
<script>
import config from "~/config";
export default {
props: {
seller: {
default: {}
}
},
computed: {
banner: function () {
return config.IMG_URL + this.seller.banner;
}
}
};
</script>
<style lang="scss">
@import "../../../assets/styles/mixin";
.seller-page {
background: #fff;
padding-bottom: px2rem(30px);
.logo {
padding: px2rem(30px) px2rem(30px) 0 px2rem(30px);
}
h2 {
font-size: px2rem(32px);
margin-top: px2rem(40px);
padding: 0 px2rem(30px) px2rem(20px) px2rem(30px);
}
p {
padding: 0 px2rem(30px);
color: #666;
font-size: px2rem(26px);
line-height: 1.5;
}
.brandstory {
display: block;
line-height: px2rem(100px);
margin-top: px2rem(50px);
color: #666;
font-size: px2rem(28px);
text-align: center;
}
.placeholder {
height: px2rem(20px);
background: #f5f5f5;
}
}
</style>
pages/shop/index.vue deleted 100644 → 0
View file @ 96d13733
<template>
<div class="shop-page">
<Header :seller="seller" />
<mt-navbar v-model="selected">
<mt-tab-item id="goods">点餐</mt-tab-item>
<mt-tab-item id="ratings">评价</mt-tab-item>
<mt-tab-item id="seller">商家</mt-tab-item>
</mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="goods">
<Goods :seller="seller" />
</mt-tab-container-item>
<mt-tab-container-item id="ratings">
<Ratings :seller="seller" />
</mt-tab-container-item>
<mt-tab-container-item id="seller">
<Seller :seller="seller" />
</mt-tab-container-item>
</mt-tab-container>
</div>
</template>
<script>
import Header from "./components/header";
import Goods from "./components/goods";
import Ratings from "./components/ratings";
import Seller from "./components/seller";
import * as shoppingApi from "~/assets/services/shopping";
export default {
components: {
Header,
Goods,
Ratings,
Seller
},
data() {
return {
selected: "goods",
seller: {}
};
},
async asyncData() {
const {
data
} = await shoppingApi.seller();
return {
seller: data
};
},
created() {
// vue resource
// this.$http.get('api/seller').then((res) => {
// res = res.body;
// if(res.errno === ERR_OK){
// this.seller = res.data;
// console.log(this.seller);
// }
// })
},
};
</script>
<style lang="scss">
@import "../../assets/styles/mixin";
.shop-page {
font-size: px2rem(24px);
.mint-navbar {
position: sticky;
top: 0;
z-index: 20;
.mint-tab-item-label {
font-size: px2rem(30px);
}
.mint-tab-item {
padding: 10px 0;
&.is-selected {
color: inherit;
border: none;
position: relative;
&::after {
content: " ";
display: inline-block;
@include wh(20%, 2px);
background: #2395ff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
}
</style>
pages/tourDetail/index.vue
View file @ a0b1923b
...@@ -22,7 +22,10 @@ ...@@ -22,7 +22,10 @@
<div <div
class="flex-aic"> class="flex-aic">
<span style="color: #666;font-size: 14px;">出发地</span> <span style="color: #666;font-size: 14px;">出发地</span>
<div>{{ detail.addressTo.provinceName }} {{ detail.addressTo.cityName }} {{ detail.addressTo.address }}</div> <div>
<div style="font-size: 14px;">{{ detail.addressTo.name }}</div>
<div style="font-size: 12px;color: #999;">({{ detail.addressTo.provinceName }} {{ detail.addressTo.cityName }} {{ detail.addressTo.address }})</div>
</div>
</div> </div>
<div <div
class="flex-aic" class="flex-aic"
...@@ -31,8 +34,8 @@ ...@@ -31,8 +34,8 @@
<div> {{ detail.addressGo.provinceName }} {{ detail.addressGo.cityName }} {{ detail.addressGo.address }}</div> <div> {{ detail.addressGo.provinceName }} {{ detail.addressGo.cityName }} {{ detail.addressGo.address }}</div>
</div> </div>
<div class="flex-aic"> <div class="flex-aic">
<span style="color: #666;font-size: 14px;">最近出发日期</span> <span style="color: #666;font-size: 14px;">出发日期</span>
<div>{{ detail.time.startTime| formatDate('yyyy/MM/dd') }} {{ detail.time.weekStart }} {{ detail.addressTo.departTime | formatDate('hh:mm') }} ~ {{ detail.time.endTime| formatDate('yyyy/MM/dd') }} {{ detail.time.weekEnd }}</div> <div>{{ detail.time.startTime| formatDate('MM/dd') }} {{ detail.time.weekStart }} {{ detail.addressTo.departTime | formatDate('hh:mm') }} ~ {{ detail.time.endTime| formatDate('MM/dd') }} {{ detail.time.weekEnd }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -91,7 +94,6 @@ ...@@ -91,7 +94,6 @@
报名须知 报名须知
</div> </div>
<div <div
class="bt-line"
v-html="notice[0].value"/> v-html="notice[0].value"/>
</div> </div>
</div> </div>
...@@ -141,18 +143,15 @@ ...@@ -141,18 +143,15 @@
let startAddress = data.data.tourDepartVo; let startAddress = data.data.tourDepartVo;
for(var i = 0;i<startAddress.length;i++){ for(var i = 0;i<startAddress.length;i++){
if(startAddress[i].type == 0){ if(startAddress[i].type == 0){
console.log(startAddress[i]);
user.addressTo = startAddress[i]; user.addressTo = startAddress[i];
} }
if(startAddress[i].type == 2){ if(startAddress[i].type == 2){
console.log(startAddress[i]);
user.addressGo = startAddress[i]; user.addressGo = startAddress[i];
} }
} }
let tourTimeVo = data.data.tourDepartTimeVo let tourTimeVo = data.data.tourDepartTimeVo
for(var i = 0;i<tourTimeVo.length;i++){ for(var i = 0;i<tourTimeVo.length;i++){
if(tourTimeVo[i].overdue == 0){ if(tourTimeVo[i].overdue == 0){
console.log(tourTimeVo[i]);
user.time = tourTimeVo[i]; user.time = tourTimeVo[i];
break break
}else{ }else{
...@@ -195,7 +194,6 @@ ...@@ -195,7 +194,6 @@
var top1 = document.querySelector('#activityIntro').offsetTop; var top1 = document.querySelector('#activityIntro').offsetTop;
var top2 = document.querySelector('#lastestDubbing').offsetTop; var top2 = document.querySelector('#lastestDubbing').offsetTop;
var top3 = document.querySelector('#rankLlistDetail').offsetTop; var top3 = document.querySelector('#rankLlistDetail').offsetTop;
console.log(top1+"-"+top2+"--"+top3+"--"+menuTop);
if (scrollTop < top1 + 180) { if (scrollTop < top1 + 180) {
this.active = 'activity'; this.active = 'activity';
this.searchBarFixed = false; this.searchBarFixed = false;
......
pages/vehicle.vue
View file @ a0b1923b
...@@ -37,16 +37,16 @@ ...@@ -37,16 +37,16 @@
class="flex-aic config"> class="flex-aic config">
<img <img
v-if="iindex==0" v-if="iindex==0"
style="margin-right: 5px;" style="margin-right: 5px;width: 20px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg=="> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABHNCSVQICAgIfAhkiAAABCJJREFUaIHt2k9sFGUABfD3vtnddnf7T1IOhSoSJCQokVLaRvSg8VAT8X+ywUsVI/FA4sGLHjw0IfHghXjgUEOsAUnMEkTTg6FqiBcOFCwaU1N6QVKshtJQ2O22uzPf81C7bdHQaTvbte38brM7s/Pe/P1md4FQKBQKhUKhUCi0FGzqPbE3InxCskHQlyNVo0eG972XK3ewUolEwTMkHgIAiIc3ZepvDwMflzlXyRgADxaniAqAu8sXp/QiBFicEijILLRQc1dXNPeAW5GvqjW1Xta9nPt+CqnTXkmTBiSymJmfSKfjbiLTQMd5POlwV1KqRjTxV3N0/2Xb++pg/4XBP9HZaUsVNgi+C+8+211XSEw+ZxA5RGIfwUoQgAAaThD5b1rathztky6B1MxyzZe6os6teKMUSZSkwTx5eI6x1vVyuWp7a/DJtzJzswA+Czf3dCWcmHmJxAcCd2DuaQCAYMIBX7cG25q+PXWwHxgovjmaqAfxPumuwLXBIGKRh2NGotlIX0vvFxemzp34+Zf2juzMHP72cCy+C0CHwB28p+xcpGmJGn24M51+cyCVygOAJ7fCgfMoDduWW8c/gsRrIn6qFD9t7un6+vIL74wC01fp+9qZTsdIsxfknvuVnV4NCIMXozUT24OKvgwOhRYCnaxMHGju6UoAPgrbDblqwm4FUONnLQSSUZg9ywwbpM1GeJfRqsfQ2WkWLJx0TQxinD42zgxRdcvLGLhtpPfKI60boguW8HJuDtA4AF/3WQEyhjeWHTFABAzJZ52aZGzBwlcKybsgrkq66efDBY3mrNu3/JjBErCZk5GFCyOV8mBtH4kLWGAvC7AkP/91vOqPoIIGRorG857xdVvK3rk2lKjdetwADSRbATj/+jzACjxjPR1FKlXcMJSyIr6DdD3A+ItG4s5EQZO+Cg+kOvMPn+8+X1/gHcq8QfJlAPUEqOmx1rCV95nnFrr7n397ZO6y/ZmqsdYNuWOea2IlaeLT1OSkHey/kWVb78ni0EtCXtDZvvaOA/+5VDrt7N6YrbZZr7EyVrkdQg2JEckOZWJ3bw48czizYg2WaFEPD0ilvCvAbQDjSKd/w8YB4mlY8P/9wDDX4grP0tzzdDXxPZhYK+bv4emrULLph1NbypSnZCxcNxGPj80rTCAGcn/Ms/vLFawUBEgyI4XMxEdLPYdXFQIksUlyjqyvc5ioW1eFCfDeQ9oTcJ3Qj2VJFCgDSE8B2ArODoXnFZbgCbp4sb3j4IrnCx5bzp3sNlQjwGLhdXVIA2HhtS8svNatv8LT31j8gxAI3Wf+1USEPGH2tyUBMoJGZ14gUABwtSzxSkDQEKTivxkkjRlZ95CVrgmYkPTVlHCsnCGDZGOTxwGdljQm4HdAh8udKRQKhUKhUCgUWq3+BswKetL4/mVRAAAAAElFTkSuQmCC">
<img <img
v-if="iindex==1" v-if="iindex==1"
style="margin-right: 5px;" style="margin-right: 5px;width: 20px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII="> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAABHNCSVQICAgIfAhkiAAABU5JREFUaIHtmWtsFFUUx///e3e32y2lRSIaSrAIEhItFHdboo1GEgMWeSiGgjyKJDRrfMWY6Bdi0kRB/WKMr7BiKH2ApiI1YgqUGtJgVOw2GERCQqkQHwkE0JQ2dLe7c/xQdvucZdpZoG32l2yy994z557/nJn7GiBFihQpUqRIMW5h/F/tKu3LWvG0hnHfbYzHHkoJDLQe+6l1H8rLDQBwxNoKJy5fB8ougDT3MMoRgRDie/jejUGgGgBUvJGSz74ZHaMQIAQFsXI8g1AApNdQRMK3MjC7kHTFCyLxRDmGtAbQFQ3NjHSE/7vJcSWFzAlZ2XDIn0O1mQoUo7vzVMmLHTcvrOSRd3S303NNhmxTQ9aOI5IlcNQOTqaP6I0obKxciijXgCwAcBeBToH8FgW+ueyM7jq3cFNXEuMcMcMWmF9Xke3K0J/B4DNkvycgi+BUB7B4SlhvubOxZmXz4+ubkxjriBiWwNwjFW5XWDcRnJvIjuQ0GHLMe6Dy0ZbijT8MMhBhweE987RE04YZbz86ukLnTq4ou5DIZlgCp4TUR1Q94qRn3fBupDscCGtc9aRpF7udDwGyg8BkAtRKfe4NBPJa/P7uvn4KD1d/CtAvtLdq8qS7I94DFWvDQKOZjWWB876vzEGEa2NlIyplweLSnei3PEBdfkPFSRccxwlkgJitc91rAVT29SWCHEX7AxMBh6LOTmRjWaArghUkPQAAkdNBd1sl+osDAPy6aNOZgsaqrTC4lQANqGUYIDASCb/scDqvKcBttf+hMIRtne1Xv9AZ2U4zm2E8our+eIDkdiwsj5hZdoTCeyY60t4CoQmZOrD9+JObzwNYbb3vxOQd3T3JrM36PKh613cQw0hkSldUhkjubcG6QAOney9Sz6G2VpuZZhjpTwkZ851wlLvZWH5EQwjtT4f7PQBuRTxYmB1e/gtQN9Bubv2OaQTeJkABBIJDg5yVlyvvI7kzGNYjXmgAQFjJvycWl15MZGO5gxOLy/4obKiuI/BsT43s9R2sXBlsT/8OJSVRiNB7qOZuraSBYGaPCf7uaG/bOdCXb8HMzSqK7dT2RtJ0MOI7WFkUAs6Y2QzrDnYaoZc8yj1fQeYQUFqprwqzuy7yYNUFOVwzEUqmEj0jrQAiGmWnSsoH7SupUZqkzbVDUYqQFIG1q7RHu16gIVl9QnMSzIFCTk9VbwMFhkRlvXd/INiyzH+pn6+IbBEHPhGxN02QPBtV/DqRjWWBhdlLt0L4Bq1O0IRW4DqmeWZ7A4GivquZ5iWlTQAesNr3jUg0TVgSOKu+Pg245CdAETEAXAQQFGDwhphwEcwnMP26fx/vcb8OYNvIwreHJYF3qMurAWYBAAS7/2m/5P+r5LVrZvbeQMDJ6Z5irbGPgFbkq7lHKt6/HVsoS/OgaCMvNihEnfwgkTgAaPH7u4PFG74V4AoAgMyY3BGeYDvaEWApgxQVvxE6ir0LDlWFLPqfBFw/ypuQGa/0NdQUKcjHFLE1yAjQJog83zXUq3KdYU+0BGbYPRtWlHcoyLfrh8AcgXMlgCrTvqw5ot2FZb/rpVveFEgngIidnwCtkO59iTq2lMEOo2uby1CDViRWUVEaLT+evRIrNy8pbZpV/+HkSHqmrRSee+x8GCw3bE8Tvz+x+QpiA0aSaF3yitX32Bapc9GxzrgXaPoOuhzanXukwtY8datwdRpus1SZCtRMb50yVj6gKYHZ7stUYPwEbYwTT6yAP4+akyIbCCCgboqV++aVvobqNUownzBG7deiRAiUGMTx4KINX2IcJCtFihQpUqRIcQP+B7jnvcfwUWbhAAAAAElFTkSuQmCC">
<img <img
v-if="iindex==2" v-if="iindex==2"
style="margin-right: 5px;" style="margin-right: 5px;width: 20px;"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC"> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAACzBJREFUaIG9WntwlcUV//32++7NO8EXaIEClgpFmyIJCXa0hRqFgoytM6LSMRF1yqgdbKfvacemD/uYTm3HGa34aExQW9NWayvNo1SthaKQBNA2LWqDb1EUk5Dnvd+3v/6REO73uIEE7Zk7k9y9u2fPb/fs2fNY4nipsdE5uyA9w3HS5cZxKmFRCeB0ECcASEJyAACkDyAFqBtil5XdaQyfgtC2I9n1CpbVescjBic7sKxxY4mK889xjL5I4VMgXU6Qn0Y+nsAnKfuL1IDduvuz67onI89kgLC8qf7zxjE3EzhpMpNmI0HdvnRT+/Z9t6G21k5IqIn0XdTSsMwVbiU5H4QzQTmPlXxBz6WlL+9aXtMMQMck3LF0OrP57hPzTeImA64HmDteXwFpAAcFvU7xTVCHRiZioYCpkKaDOIlg4ijTDlmhzqYGbmpfvf7t4wZSsbn+DLi8F+SSuDMwoufoBfA0oL8CeMzn4PPtVet7wdBqCqxsuq/IM5prDJdRqiJQKWLKOLw70iZdvavq6s5JAylrqZtv4DxmyNPiJiFwwJceHPD8H3auWrd/PF7ZqLSlYWoO8TUInyM5LQugd5T2qnauWrd7wkDKWurmO3D3kEjGMLaSNvYOpb++9+JrDk0GQJhKWxoKcmR/QONsIGAicwop69slbStrdsWNjwWy6NGGj7hJNhGYFQIgQAc8D1d05HU9eby2P0KNjU75lNQSI/sbkNPDuyPgVbi4aMenrtxzVCBnNt99Yj6TjxrynDAIAX9POXbtnvNrXntPAYSorHnTaYaoJ1EVASO0+ylnRfvqtQEDEN5C5jP5I5JLAoNHPk3veu+ufr9BAED7iivf6E/2XiLoYYXNL7HI5Pg/RwhgAEhZ630XGLI6cxVGd+Kxg173FS+s3NBb1rYxMe+Re4rQ2Hhs94hqTdnGjUcztRHqXHZDX3/iUA2gpkwwBEhhzeKWhouC+DL+r2hpeJ7khwJySPv7PP/szlXr9pf9pf6DjjWtoGZKarE9Q+va16zvySbMwqa62Qnj3Enggxa8pW35lXdhnAuu9PH7ZuSk9ANAuda332pfedV/52+pP6nYmj0EpofkeuPg3u45L2zYMAxk7Mji1oYagrMDnQErepd3rlq3v7SlocCx5o8k5hHMJ81nnJK8W7MJhcbaZMI4TSSrSM4zxK2LWzatzQq69f4P56bsP0hUG/IyxzVPlf2l7qP/qap5Jw19RkIqNGTaCfNKrjn8xQAjB9yIP8l0O0ZUytbv7C7cCgCueBqJsw7/ToAgFmcTbFHRnPkkTz+spgRyQFyHxktjVTIJuxrkjCP9eTLlfBoAdv2jqwPEnQEVIw1pvnvWlgemjQHJcZJLQUwNcJYO9OZ7N2LNGh8A4Cmh0Jkaz9t1EygI3weUzQUuje0vqCTCT8oHANTW2r7u3m8CejU0/8k5fnrFCJDGRscVrw8yhUA17j33yGWXyDWM2nVm1Xc/DQcK9R+JSWKJijqhFMc84M41N/RJuD9sxRzyWjxe65pFxcNzIJwXYtrdM+j9KCCYbyO3LcY5uC6RiOyX4OPSztgxQhSIiADwYeDnAN4J9mJlpT/3DAP6lSAC5tFC2/ZefM3rmW1GjE4EZF1hzyhicgmm8d34/qSJLJQhA57DM8ur35L011A3V9Y/zzgy54RVxkKtEaGNiZwHAlmDH4qOpNAYZQUu2MhCWcXwJ5pDMpBwlhgSZwcZIk0fWyNMbaxqZQcCuuGzS8nHd74Tr44xZ8QwuuOe5+0QgqbYypYakgHHENLbBxNDXRGmblS1ELdiYwNizogxqWyGjnFnJEZ1h/MGX4b0ZmAsOd0VMCVwvQOvdG17I+Ka2+GUMYmI2heWN9UthZNIS9Yz1rekm/J9z1KaDTBk5WxOadNd0/O2FKQ9B/7Q8IDNdYr93LxDNtWPnDBEK0V2r3Pp9f0VrZteBDAzQ+ZiF1Ayc5UE80Zc4C8yupTEGY7jboE04gE5LgDAMY4IRmwzZZbmurl75XtwLFVocgQNwxtIWgKREJqKMSak1NLwWqYwAhIuwaDu0/ZGBgMwbsKJOqIgACesLRxtiLEODoF8xK1JjMZls4qEegLcpajJi1lIAIAv7/3KmmQlx/CYAzcjKKhGViWxPWknncybDAkaTKdT8TE6TXHwO60BGDBlBE5DbW1kp+i5cValW9BWAE9LaBewG8Czgv4F4M1If2lA0n4BByAdFNQtoAcjWZg+SQMABgUcsODlu1Zd0xZFKIKYEZI57QroIVCQgW7G3Iq5hS+MMB8jx8hEtV4dOy7ougC/XTD2w9JTTuGh554j5+R9yQF/Ehrwaz81uAEA0sk8QsDwUMr4iRyWJPrp9yfpJ5L0B7rTnWtu6IuAALDgidsLpOJZoRuq16X0EsgPjIkGnVJkUnMABAJ8a6IHSoIFgxbuidG/Fa2bYtI6Gm5fvX4gTsBjpdz+oplM4NTMNbXSa0ZgIL1CMOGYxLlhBsY4UXWLuXmP8FFOtFXh4GjC5CZUEU5REfqnAe32sGtM6MIwA+v50TOS4WZH+gtRp9E46YmJHUPGCcg2GgA+Zayj7RACExiZ8+Y9cs8HMtscN2rpyXFcFMANN8jL7jQeC5215YFpUHiR5Xm+/ZtpNy++BGhb4CdiSnFu4quZbTbGqRPsOKqFiGrR5dBEhc+kPN9+AaFShsCdu6amnzdYVuv5xC9DQpDEFQsev61wrM2LOo2EyQrExuyItZp0ZrK04acFgA2kqkaFuBvl69MGAByjxwSEUvecWpAq+tnh/JViLkSN4/0SQeAj4TMmd0Zqa01y2rTvk5yZ2SzoIFyvCRhNDuyoqnnHSt9Ahm8zsiu8dmHJcCUAWEevCfCOMIFA+0K2uSX770yglKzE5yaDY+HHZ5Ua8vpA4lCygr63c9lIFWDMpLYtr/4VgH2ZDAiYJPDQgs11p3Zse2mHhW45bOEkbbfdQ4G4PpPacvbdAerZ0UylBLYNbv/vnycKouxPG09OwN0cPnME97/7n547MmQ9Qota6i9yyd8RHBs0Kkhz72Dqsr27XhlcWDZrjhJMiubFZ5ZX948nxMKH66a4he5CWt/2J/M7Opetib2ts1FpS0NBruF9EC4O7gZSVv7athVX/T4WCASWtzbcbch14fwviEd6BlLV71U95FhA5AD3kFwTyUVLD+68sHptZkUsFItAfY6+Jqgt2AxCuLgkL/GHBZvrTv0/gJiaA/42DGKU9gwDN4bLerGu+eLme8+EcVoNELgUR8/HWynhkt09OU+PZSHfK1KtWdQ6+2yHzkMEZkZrI3rTl7eyfcXVHeGhWWOMii31Z8A3z2YpvUnSXb0F6a9kZiOPhxY03lZYUFJ0M8kvZCu9iV7lzgvj64jjBksVzZs+BqqZZESdRouhr0t4oM/zbjmeYmiudCPIK0fLbTEgdNAHVrYvr96BLNnNo0Z9I2pm6giWZyshE+i2wN8pu8X62HowMdTVVfX53kjYLHFu0/1FRWZ4joPEuTQ8n8AnAJyYtTwtPZMWa3atiNYNJwQEAEaKLbiZMDWIyXaEJk8DeJvQKxbcT7AHsIBQDPJUAjMFnXK0BwOChmX5wDD7vvHM8uveOpqME3rCUd6yqcoBbgcxBzEJtfeCJFmQL3qyN3ZcWLM58uggm3CTmIvlLQ1XG/LHBE6exPjsJLxrYb+9c/u+O97PRzUBqthSf5LS/KQxuE7kJwAkxiv8xFHGM6dtFrodCffx9mVrj/ruJI6OP8XT2OiUFQ7MNi7PIVAJmUUkZgmYAig5lpwmfAhpkt2CfVk0HQKe9uRt3514ad/xPj74H7eA5SPXKSmpAAAAAElFTkSuQmCC">
{{ iitem.name }} {{ iitem.name }}
</span> </span>
</div> </div>
......
pages/vehicleDetail/index.vue
View file @ a0b1923b
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
<div class="base-set"> <div class="base-set">
房车参数 房车参数
</div> </div>
<div> <div style="padding-bottom: 20px;">
<div <div
v-for="iitem in detail.modelParam" v-for="iitem in detail.modelParam"
:key="iitem.key" :key="iitem.key"
...@@ -157,21 +157,6 @@ ...@@ -157,21 +157,6 @@
</div> </div>
</div> </div>
</div> </div>
<div
class="models-details"
v-html="detail.modelsDetails"/>
<div v-html="notice"/>
<div
class="kr-article-article"
style="background: #fff;">
<div
v-for="iitem in detail.modelParam"
:key="iitem.key"
class="flex-aic modal-item" >
<div class="left-item ellipsis color-666">{{ iitem.key }}</div>
<div class="right-item ellipsis color-666">{{ iitem.val }}</div>
</div>
</div>
</div> </div>
<go-top/> <go-top/>
</div> </div>
...@@ -466,7 +451,7 @@ ...@@ -466,7 +451,7 @@
.modal-item{ .modal-item{
border-top:1px solid #ccc; border-top:1px solid #ccc;
} }
.kr-article-article .modal-item:last-child{ .modal-item:last-child{
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
} }
......
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