111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<template>
|
|
<div class="layout">
|
|
<div class="con_view">
|
|
<div class="-item-tilte">
|
|
<img class="image-mode" style="height: 150px" :src="model.imgs" />
|
|
<span> {{ model.name }}</span>
|
|
</div>
|
|
<div class="sea" @click="clickSwiper">更多></div>
|
|
</div>
|
|
<!-- <div>自己代码编辑</div> -->
|
|
<div class="menu-list" style="overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none;">
|
|
<div class="menu-item" v-for="(item, index) in res.list" :key="index">
|
|
<div>
|
|
<img class="menu-img" :src="item.img" alt="" @click="modelNavigateTo(item)" />
|
|
</div>
|
|
<!-- <div class="menu-title">{{ item.title }}</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { modelNavigateTo } from "./tpl";
|
|
export default {
|
|
title: "达人店",
|
|
data() {
|
|
return {
|
|
modelNavigateTo,
|
|
};
|
|
},
|
|
props: ["res","model"],
|
|
watch: {
|
|
res: {
|
|
handler(newValue, oldValue) {
|
|
this.$set(this, "res", newValue);
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {
|
|
//跳转个人店铺
|
|
tostorePage(val) {
|
|
console.log(val);
|
|
|
|
uni.navigateTo({
|
|
url: "/pages/product/shopPage?id=" + val.url.id,
|
|
});
|
|
},
|
|
//跳转店铺
|
|
clickSwiper(index) {
|
|
uni.navigateTo({
|
|
url: "/pages/product/shopList",
|
|
});
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "./tpl.scss";
|
|
.carousel,
|
|
.image-mode {
|
|
width: 30px;
|
|
height: 30px !important;
|
|
}
|
|
.layout{
|
|
background: url('@/static/tanback.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.con_view {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.-item-tilte {
|
|
display: flex;
|
|
& > span {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
font-weight: 800;
|
|
color: white;
|
|
}
|
|
}
|
|
.sea {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px;
|
|
color: white;
|
|
}
|
|
.menu-list {
|
|
display: flex;
|
|
align-items: center;
|
|
// flex-wrap: wrap;
|
|
|
|
> .menu-item {
|
|
text-align: center;
|
|
width: 200px;
|
|
margin: 10px 10px;
|
|
}
|
|
}
|
|
.menu-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.menu-title {
|
|
font-size: 12px;
|
|
}
|
|
.menu-list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|