Skip to content

H
hs-app-project
Commit 1110c710 authored by Zheng Shang Jun's avatar Zheng Shang Jun
Browse files
Options

布局基本完成

parent 0af5e9a3
Hide whitespace changes
Inline Side-by-side
Showing with 1098 additions and 37 deletions
src/pages.json
View file @ 1110c710
...@@ -5,7 +5,21 @@ ...@@ -5,7 +5,21 @@
}, },
"pages": [ "pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
//品牌商首页
{
"path": "pages/brands/brands",
"style": {
"navigationBarTitleText": "品牌商首页",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationStyle": "custom",
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES",
"allowsBounceVertical": "NO"
}
}
},
{ {
"path": "pages/home/tenantSelection", "path": "pages/home/tenantSelection",
"style": { "style": {
...@@ -478,6 +492,40 @@ ...@@ -478,6 +492,40 @@
"allowsBounceVertical": "NO" "allowsBounceVertical": "NO"
} }
} }
},
{
"path": "pages/brands/everyDay",
"style": {
"navigationBarTitleText": "每日上新",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false
}
},
{
"path": "pages/brands/browse",
"style": {
"navigationBarTitleText": "浏览记录",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false
}
},
{
"path": "pages/brands/collection",
"style": {
"navigationBarTitleText": "收藏",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/brands/detail",
"style": {
"navigationBarTitleText": "上架详情",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {
...@@ -485,5 +533,22 @@ ...@@ -485,5 +533,22 @@
"navigationBarTitleText": "uni-app", "navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8"
} },
"tabBar": {
"color": "#969799",
"selectedColor": "#000",
"borderStyle": "white",
"list": [
{
"text": "首页",
"pagePath": "pages/brands/brands",
"iconPath": "static/images/home/home.png"
},
{
"text": "收藏",
"pagePath": "pages/brands/collection",
"iconPath": "static/images/home/message.png"
}
]
}
} }
src/pages/brands/brands.vue
View file @ 1110c710
...@@ -18,10 +18,9 @@ ...@@ -18,10 +18,9 @@
</view> </view>
<!-- 每日上新 --> <!-- 每日上新 -->
<view class="everyUpdate"> <view class="everyUpdate">
<u-card full :head-border-bottom="false"> <u-card full :head-border-bottom="false" @head-click="headTab">
<view slot="head"> <view slot="head">
<text class="title">每上更新</text> <head-title title="每日上新" subtitle="DAILY NEW"></head-title>
<text class="sub-title">12334</text>
</view> </view>
<view slot="body"> <view slot="body">
<view class="imgList"> <view class="imgList">
...@@ -36,11 +35,30 @@ ...@@ -36,11 +35,30 @@
</view> </view>
</u-card> </u-card>
</view> </view>
<!-- 热门款式 -->
<view class="hotstyle">
<u-card full :head-border-bottom="false">
<view slot="head">
<head-title title="热门款式" subtitle="HOT STYLES"></head-title>
</view>
<view slot="body">
<view class="hotFlex">
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
</view>
</view>
</u-card>
</view>
</view> </view>
</template> </template>
<script> <script>
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式
export default { export default {
components: { headTitle, hotStyle },
data() { data() {
return { return {
background: { backgroundColor: "rgba(245,245,245,0)" }, background: { backgroundColor: "rgba(245,245,245,0)" },
...@@ -51,6 +69,9 @@ export default { ...@@ -51,6 +69,9 @@ export default {
searchCli() { searchCli() {
this.$router.push("/pages/home/search"); this.$router.push("/pages/home/search");
}, },
headTab() {
this.$router.push("pages/brands/everyDay");
},
}, },
}; };
</script> </script>
...@@ -73,21 +94,10 @@ export default { ...@@ -73,21 +94,10 @@ export default {
::v-deep .u-card__body { ::v-deep .u-card__body {
padding: 0rpx 0rpx 40rpx 36rpx !important; padding: 0rpx 0rpx 40rpx 36rpx !important;
} }
// 标题样式 ::v-deep .u-card__head {
.title { padding-bottom: 34rpx !important;
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
}
// 副标题
.sub-title {
font-size: 12px;
font-family: DINPro, DINPro-Medium;
font-weight: 500;
color: rgba(0, 0, 0, 0.2);
margin-left: 9rpx;
} }
.imgList { .imgList {
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
...@@ -99,4 +109,19 @@ export default { ...@@ -99,4 +109,19 @@ export default {
} }
} }
} }
//热门款式
.hotstyle {
::v-deep .u-card__body {
padding-top: 24rpx !important;
}
::v-deep .u-card__head {
padding-bottom: 0rpx !important;
}
width: 100%;
.hotFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
</style> </style>
src/pages/brands/browse.vue 0 → 100644
View file @ 1110c710
<template>
<!-- 我的收藏
isbrowse传给子组件判断是否需要爱心 默认false
editor 出现checkout的bool 默认false
list传过去的数据 Array
options 右边滑动出现删除的东西 Array
-->
<view>
<browse-item :isbrowse="true" :list="list">
<!-- 头部插槽 -->
<template #title>
<text class="browseicon">图标</text>
<text class="browseTime">2021-12-12 13:11</text>
</template>
</browse-item>
</view>
</template>
<script>
import browseItem from "./components/browseItem.vue";
export default {
components: { browseItem },
data() {
return {
list: [
{
id: 1,
title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
{
id: 2,
title:
"新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
{
id: 3,
title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
images: require("../../static/images/brank/thumb.png"),
show: false,
browseImg: require("../../static/images/brank/blackxin.png"),
},
],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
//组件头部时间图标
.browseicon {
width: 32rpx;
}
//组件头部时间
.browseTime {
width: 252rpx;
height: 32rpx;
font-size: 32rpx;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 1);
margin-left: 10rpx;
}
</style>
src/pages/brands/collection.vue 0 → 100644
View file @ 1110c710
<template>
<!-- 我的收藏
isbrowse传给子组件判断是否需要爱心 默认false
editor 出现checkout的bool 默认false
list传过去的数据 Array
options 右边滑动出现删除的东西 Array
-->
<view class="collect">
<view class="head">
<text class="text1">我的收藏</text>
<text class="text2">My collection</text>
<text class="btn" @click="editorClick" v-show="!edit">编辑</text>
<text class="btn" @click="completeClick" v-show="edit">完成</text>
</view>
<browse-item :isbrowse="false" :edit="edit" :list="list" :options="options">
<!-- 头部插槽 -->
<template #title>
<!-- 头部title -->
<text class="flagname">加厚荷兰绒绒布布料</text>
</template>
</browse-item>
<!-- 弹出框 -->
<!-- <u-popup
class="posi"
v-model="edit"
mode="bottom"
:mask="false"
length="100rpx"
>
<view class="pop-up">
<u-checkbox-group class="checkStyle">
<u-checkbox
@change="checkboxChange"
v-model="allchecked"
name="全选"
shape="circle"
>全选</u-checkbox
>
</u-checkbox-group>
<u-button size="mini" class="bttn">取消收藏</u-button>
</view>
</u-popup> -->
</view>
</template>
<script>
import browseItem from "./components/browseItem.vue";
export default {
components: { browseItem },
data() {
return {
list: [
{
id: 1,
title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("@/static/images/brank/thumb.png"),
show: false,
browseImg: require("@/static/images/brank/blackxin.png"),
name: "apple",
checked: false,
},
{
id: 2,
title:
"新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来",
images: require("@/static/images/brank/thumb.png"),
show: false,
browseImg: require("@/static/images/brank/blackxin.png"),
name: "banner",
checked: false,
},
{
id: 3,
title: "登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇",
images: require("@/static/images/brank/thumb.png"),
show: false,
browseImg: require("@/static/images/brank/blackxin.png"),
name: "orange",
checked: false,
},
],
options: [
{
text: "删除",
style: {
backgroundColor: "#dd524d",
},
},
],
// 编辑点击
edit: false,
// 全选
// allchecked: false,
};
},
methods: {
// 编辑
editorClick() {
this.edit = true;
},
// 完成
completeClick() {
this.edit = false;
},
// 选中某个复选框时，由checkbox时触发
// checkboxChange(e) {
// // 全选操作
// if (e.name == "全选") {
// if (!this.allchecked) {
// this.list.map((val) => {
// val.checked = true;
// });
// } else {
// this.list.map((val) => {
// val.checked = false;
// });
// }
// }
// },
},
};
</script>
<style lang="scss" scoped>
.collect {
height: 100%;
position: relative;
.head {
width: 100%;
margin-top: 16rpx;
position: relative;
margin-bottom: 36rpx;
}
.text1 {
width: 160rpx;
height: 56rpx;
font-size: 40rpx;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
color: rgba(0, 0, 0, 0.8);
line-height: 56rpx;
margin-left: 38rpx;
}
.text2 {
width: 194rpx;
height: 40-rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: #dda973;
line-height: 40rpx;
margin-left: 10rpx;
}
.btn {
width: 56rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
text-align: right;
color: rgba(0, 0, 0, 0.6);
line-height: 40rpx;
position: absolute;
right: 30rpx;
bottom: 0;
}
// // 底部地位
// .posi {
// position: absolute;
// bottom: 0;
// .pop-up {
// position: relative;
// height: 100%;
// .checkStyle {
// position: absolute;
// left: 59rpx;
// top: 50%;
// transform: translateY(-50%);
// }
// .bttn {
// width: 160rpx;
// height: 64rpx;
// position: absolute;
// right: 30rpx;
// top: 50%;
// transform: translateY(-50%);
// }
// }
// }
}
//头部旗帜店名
.flagname {
width: 144px;
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
}
</style>
src/pages/brands/components/browseItem.vue 0 → 100644
View file @ 1110c710
<template>
<!-- 浏览记录组件 -->
<view class="browse">
<u-card :head-border-bottom="false">
<!-- 头部 -->
<view slot="head">
<view>
<u-checkbox-group v-if="edit">
<u-checkbox
@change="checkboxChange"
v-model="allchecked"
name="全选"
shape="circle"
></u-checkbox>
</u-checkbox-group>
<!-- 插槽 -->
<slot name="title"></slot>
</view>
</view>
<!-- 主体 -->
<view slot="body">
<u-swipe-action
:show="item.show"
:index="index"
v-for="(item, index) in list"
:key="item.id"
@click="click"
@open="open"
:options="options"
>
<view class="item u-border-bottom">
<!-- 多选框 -->
<u-checkbox-group v-if="edit">
<u-checkbox
@change="checkboxChange"
v-model="item.checked"
name="item.name"
shape="circle"
></u-checkbox>
</u-checkbox-group>
<!-- 照片 -->
<image class="imges" :src="item.images" />
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
<view class="title-wrap">
<view class="title">{{ item.title }}</view>
<!-- 款号 -->
<view class="modelno">
<text class="textStyle1">款号</text>
<text class="textStyle2">AS23124</text>
<!-- 是否需要爱心 -->
<view v-if="isbrowse">
<image
@click="browerClick(index, $event)"
:src="item.browseImg"
v-if="islove"
></image>
<image
@click="browerClick(index, $event)"
src="@/static/images/brank/lightxin.png"
v-else
></image>
</view>
</view>
<!-- 面料 -->
<view class="fabric">
<text class="textStyle1">面料</text>
<text class="textStyle2">AS23124</text>
</view>
</view>
</view>
</u-swipe-action>
</view>
</u-card>
<u-popup
class="posi"
v-model="edit"
mode="bottom"
:mask="false"
length="100rpx"
>
<view class="pop-up">
<u-checkbox-group class="checkStyle">
<u-checkbox
@change="checkboxChange"
v-model="allchecked"
name="全选"
shape="circle"
>全选</u-checkbox
>
</u-checkbox-group>
<u-button size="mini" class="bttn">取消收藏</u-button>
</view>
</u-popup>
</view>
</template>
<script>
export default {
props: {
isbrowse: {
type: Boolean,
default: false,
},
edit: {
type: Boolean,
default: false,
},
list: { type: Array },
options: { type: Array },
},
data() {
return {
show: false,
// 爱心的黑暗显影
islove: false,
//全选
allchecked: false,
};
},
methods: {
// 选中某个复选框时，由checkbox时触发
checkboxChange(e) {
// 全选操作
if (e.name == "全选") {
if (!this.allchecked) {
this.list.map((val) => {
val.checked = true;
});
} else {
this.list.map((val) => {
val.checked = false;
});
}
}
},
// 爱心点击
browerClick(i, e) {
console.log(i, e);
// this.islove = !this.islove;
},
//滑动删除的东西
click(index, index1) {
if (index1 == 0) {
this.list.splice(index, 1);
this.$u.toast(`删除了第${index}个cell`);
} else {
this.list[index].show = false;
this.$u.toast(`收藏成功`);
}
},
// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
open(index) {
// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
// 原本为'false'，再次设置为'false'会无效
this.list[index].show = true;
this.list.map((val, idx) => {
if (index != idx) this.list[idx].show = false;
});
},
},
components: {},
};
</script>
<style lang="scss" scoped>
.browse {
::v-deep .u-card__body {
padding-top: 29rpx !important;
}
::v-deep .u-card__head {
padding-bottom: 0rpx !important;
}
}
.item {
display: flex;
padding: 20rpx;
}
.imges {
width: 162rpx;
height: 162rpx;
margin-right: 20rpx;
border-radius: 12rpx;
}
.title {
width: 440rpx;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
text-align: left;
color: #333333;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*禁止换行*/
text-overflow: ellipsis;
}
//头部时间图标
.browseicon {
width: 32rpx;
}
//头部时间
.browseTime {
width: 252rpx;
height: 32rpx;
font-size: 32rpx;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 1);
margin-left: 10rpx;
}
// 款号
.modelno {
height: 40rpx;
margin-top: 16rpx;
display: flex;
position: relative;
image {
height: 40rpx;
width: 45rpx;
position: absolute;
right: 29rpx;
}
}
//面料
.fabric {
margin-top: 6rpx;
}
.textStyle1 {
color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
margin-left: 40rpx;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 500;
color: #333333;
}
// 底部地位
.posi {
position: absolute;
bottom: 0;
.pop-up {
position: relative;
height: 100%;
.checkStyle {
position: absolute;
left: 59rpx;
top: 50%;
transform: translateY(-50%);
}
.bttn {
width: 160rpx;
height: 64rpx;
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
</style>
src/pages/brands/components/header.vue 0 → 100644
View file @ 1110c710
<template>
<view>
<text class="title">{{ title }}</text>
<text class="sub-title">{{ subtitle }}</text>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
},
subtitle: {
type: String,
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
// 标题样式
.title {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
color: rgba(0, 0, 0, 0.8);
}
// 副标题
.sub-title {
font-size: 12px;
font-family: DINPro, DINPro-Medium;
font-weight: 500;
color: rgba(0, 0, 0, 0.2);
margin-left: 9rpx;
}
</style>
src/pages/brands/components/hotStyle.vue 0 → 100644
View file @ 1110c710
<template>
<view class="hots">
<image
@click="tabdetail"
class="indexhot"
src="../../../static/images/brank/mei1.jpg"
></image>
<view class="hotborder">
<view class="hotText1">男装-上装-青年-时尚休闲</view>
<view class="hotText2">
<image
class="iconhot"
src="../../../static/images/brank/mei1.jpg"
></image>
<text class="wen">我的文字是dsadasdasddsads</text>
<image
class="iconLove"
src="../../../static/images/brank/blackxin.png"
v-if="ImageBool"
@click="tabImage"
></image>
<image
class="iconLove"
src="../../../static/images/brank/lightxin.png"
v-else
@click="tabImage"
></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 爱心切换的bool
ImageBool: true,
};
},
methods: {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
},
// 跳转到详情
tabdetail() {
this.$router.push("pages/brands/detail?id=2");
},
},
};
</script>
<style lang="scss" scoped>
.hots {
height: 578rpx;
width: 330rpx;
margin-bottom: 20rpx;
.indexhot {
display: block;
height: 434rpx;
width: 330rpx;
border-radius: 10rpx 10rpx 0 0;
}
.hotborder {
height: 144rpx;
border: 2rpx solid #e3e1e0;
// border-top: 0rpx !important;
border-radius: 0 0 10rpx 10rpx;
}
.hotText1 {
font-size: 24rpx;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
color: rgba(0, 0, 0, 0.8);
margin: 24rpx 28rpx 0 20rpx;
}
.hotText2 {
width: 100%;
// background-color: red;
margin-top: 16rpx;
display: flex;
align-items: center;
// margin: 24rpx 0rpx 0 20rpx;
.iconhot {
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
.wen {
width: 192rpx;
font-size: 24rpx;
margin-left: 10rpx;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*禁止换行*/
text-overflow: ellipsis;
}
.iconLove {
width: 36rpx;
height: 32rpx;
margin-left: 20rpx;
}
}
}
</style>
src/pages/brands/components/hs-material-thumbnail.vue 0 → 100644
View file @ 1110c710
<template>
<view class="home_con_content_order" @click="click">
<image
class="width_100 hs-height-160"
src="@/static/images/home/1@2x.png"
mode=""
></image>
<view class="order_tit">
<view class="u-flex justify-between u-font-32">
<span class="color_DDA973 u-line-1"
>{{ item.materialName }}加厚荷兰绒绒布布料</span
>
</view>
<view class="u-font-24 u-m-t-20 color_6F6F72">
<span class="u-m-r-10">{{ item.materialCategory }}</span>
|
<span class="u-m-l-10 u-m-r-10">{{ item.materialDoorWidth }} cm</span>
|
<span class="u-m-l-10">{{ item.materialElement }}</span>
</view>
</view>
</view>
</template>
<script>
export default {
name: "hs-material-thumbnail",
props: {
item: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
methods: {
click() {
this.$emit("click");
},
},
};
</script>
<style scoped lang="scss">
.home_con_content_order {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 160rpx;
border-radius: 8rpx;
overflow: hidden;
width: 100%;
.order_tit {
position: absolute;
width: 75%;
right: 0;
flex-direction: column;
display: flex;
justify-content: center;
padding: 20rpx;
flex: 1;
height: 100%;
background: rgba(17, 21, 30, 0.5);
}
}
.width_30 {
width: 30%;
}
.color_DDA973 {
color: #dda973;
}
.color_6F6F72 {
color: #6f6f72;
}
.bd_dashed {
position: relative;
}
.bd_dashed:after {
border-width: 1px;
}
.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
content: " ";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
box-sizing: border-box;
transform-origin: 0 0;
width: 199.8%;
height: 199.7%;
transform: scale(0.5, 0.5);
border: 1px dashed #e4e7ed;
z-index: 2;
}
.ov_hiden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
src/pages/brands/detail.vue 0 → 100644
View file @ 1110c710
<template>
<view>
<!-- <u-navbar title="" :border-bottom="false" :background="background">
</u-navbar> -->
<view>
<u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image>
</view>
<view class="u-p-r-30 u-p-l-30">
<!--款式信息 -->
<view class="bg-fff u-p-t-20 u-p-r-30 u-p-b-30 u-p-l-30 item">
<view class="u-border-bottom u-line-88">款式信息</view>
<view class="fabric u-m-t-24">
<text class="textStyle1">产品款号</text>
<text class="textStyle2">AS23124</text>
</view>
<view class="fabric u-m-t-8">
<text class="textStyle1">面料供应商</text>
<text class="textStyle2">AS23124</text>
</view>
</view>
<!-- 面料信息 -->
<view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item">
<view class="u-border-bottom u-line-88">面料信息</view>
<view class="u-m-t-30 u-m-b-56">
<material :item="item"></material>
</view>
<!-- 其他颜色 -->
<view class="u-flex">
<view class="overflow u-flex-1">
<view>其他颜色</view>
<view>
<view class="image u-m-r-10">
<image src="" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
<view class="image u-m-r-10">
<image src="" style="width: 100%; height: 100%"></image>
<view class="image-tip u-line-1">颜色</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="sampling">
<u-button>我要采购布样</u-button>
</view>
</view>
</template>
<script>
import material from "./components/hs-material-thumbnail.vue";
export default {
components: { material },
data() {
return {
item: {},
};
},
};
</script>
<style scoped lang="scss">
$h-color: #af8d66;
$activeColor: #dda973;
$color: rgba(175, 141, 102, 0.1);
$main-color: #fff;
// 款式信息
.textStyle1 {
display: inline-block;
width: 160rpx;
color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
margin-left: 40rpx;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 500;
color: #333333;
}
// 我要采购布样
.sampling {
position: fixed;
bottom: 0;
width: 750rpx;
height: 100rpx;
background: #ffffff;
box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
.u-btn {
width: 630rpx;
height: 88rpx;
background: rgba(0, 0, 0, 0.8);
border-radius: 44rpx;
color: white;
}
}
.u-line-88 {
line-height: 88rpx;
}
.bg-fff {
position: relative;
top: -10rpx;
background: #fff;
}
.item {
width: 100%;
margin-bottom: 28rpx;
&--round {
border-radius: 16rpx;
border: 1px solid rgba(0, 0, 0, 0.1);
}
&-tag {
padding: 6rpx 2px;
background: $color;
text-align: center;
color: $h-color;
display: inline-block;
margin-right: 10rpx;
}
}
.image {
position: relative;
width: 160rpx;
height: 160rpx;
display: inline-block;
&-tip {
text-align: center;
width: 100%;
height: 40rpx;
line-height: 40rpx;
background: rgba(255, 255, 255, 0.8);
font-size: 24rpx;
position: absolute;
bottom: 0;
left: 0;
}
}
.overflow {
overflow-x: auto;
white-space: nowrap;
}
</style>
src/pages/brands/everyDay.vue 0 → 100644
View file @ 1110c710
<template>
<!-- 每日上新 -->
<u-card full :head-border-bottom="false">
<view slot="body">
<view class="hotFlex">
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
<hot-style></hot-style>
</view>
</view>
</u-card>
</template>
<script>
import hotStyle from "./components/hotStyle"; //热门款式
export default {
components: {
hotStyle,
},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
::v-deep .u-card__body {
padding-top: 20rpx !important;
}
::v-deep .u-card__head {
padding: 0rpx !important;
}
.hotFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
src/pages/message/message.vue deleted 100644 → 0
View file @ 0af5e9a3
<template>
<view>信息</view>
</template>
<script>
</script>
<style>
</style>
src/pages/mine/my.vue deleted 100644 → 0
View file @ 0af5e9a3
<template>
<view>我的</view>
</template>
<script>
</script>
<style>
</style>
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