Skip to content

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

样式几乎全部完成

parent 63423f54
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 175 deletions
src/pages/brands/brands.vue
View file @ 8ffbf5b1
...@@ -51,6 +51,8 @@ ...@@ -51,6 +51,8 @@
</view> </view>
</u-card> </u-card>
</view> </view>
<!-- 底部占位符 -->
<view class="mask-template"></view>
</view> </view>
</template> </template>
...@@ -77,8 +79,10 @@ export default { ...@@ -77,8 +79,10 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.brandsindex { // 底部占位符
height: 100%; .mask-template {
width: 100%;
height: 100rpx;
} }
//头部 //头部
.back_img { .back_img {
...@@ -116,7 +120,6 @@ export default { ...@@ -116,7 +120,6 @@ export default {
.hotstyle { .hotstyle {
::v-deep .u-card__body { ::v-deep .u-card__body {
padding-top: 24rpx !important; padding-top: 24rpx !important;
margin-bottom: 70rpx;
} }
::v-deep .u-card__head { ::v-deep .u-card__head {
padding-bottom: 0rpx !important; padding-bottom: 0rpx !important;
......
src/pages/brands/browse.vue
View file @ 8ffbf5b1
<template> <template>
<!-- 我的收藏 <!-- 浏览记录
isbrowse传给子组件判断是否需要爱心 默认false isbrowse传给子组件判断是否需要爱心 默认false
editor 出现checkout的bool 默认false editor 出现checkout的bool 默认false
list传过去的数据 Array list传过去的数据 Array
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<browse-item :isbrowse="true" :list="list"> <browse-item :isbrowse="true" :list="list">
<!-- 头部插槽 --> <!-- 头部插槽 -->
<template #title> <template #title>
<text class="browseicon">图标</text> <text class="browseicon"><u-icon name="clock"></u-icon></text>
<text class="browseTime">2021-12-12 13:11</text> <text class="browseTime">2021-12-12 13:11</text>
</template> </template>
</browse-item> </browse-item>
...@@ -57,6 +57,12 @@ export default { ...@@ -57,6 +57,12 @@ export default {
//组件头部时间图标 //组件头部时间图标
.browseicon { .browseicon {
width: 32rpx; width: 32rpx;
::v-deep .u-icon {
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: red;
}
} }
//组件头部时间 //组件头部时间
.browseTime { .browseTime {
......
src/pages/brands/collection.vue
View file @ 8ffbf5b1
...@@ -13,35 +13,34 @@ ...@@ -13,35 +13,34 @@
<text class="btn" @click="completeClick" v-show="edit">完成</text> <text class="btn" @click="completeClick" v-show="edit">完成</text>
</view> </view>
<browse-item :isbrowse="false" :edit="edit" :list="list" :options="options"> <view class="collect-body">
<!-- 头部插槽 --> <browse-item
<template #title> :isbrowse="false"
<!-- 头部title --> :edit="edit"
<text class="flagname">加厚荷兰绒绒布布料</text> :list="list"
</template> :options="options"
</browse-item> >
<!-- 头部插槽 -->
<template #title>
<!-- 头部title -->
<text class="flagname">加厚荷兰绒绒布布料</text>
</template>
</browse-item>
<!-- 弹出框 --> <!-- 弹出框 -->
<!-- <u-popup <view class="posi" v-show="edit">
class="posi" <view class="pop-up">
v-model="edit" <u-checkbox-group class="checkStyle">
mode="bottom" <u-checkbox v-model="playCheckout" name="全选" shape="circle"
:mask="false" >全选</u-checkbox
length="100rpx" >
> </u-checkbox-group>
<view class="pop-up"> <u-button size="mini" class="bttn">取消收藏</u-button>
<u-checkbox-group class="checkStyle"> </view>
<u-checkbox
@change="checkboxChange"
v-model="allchecked"
name="全选"
shape="circle"
>全选</u-checkbox
>
</u-checkbox-group>
<u-button size="mini" class="bttn">取消收藏</u-button>
</view> </view>
</u-popup> --> </view>
<!-- 底部占位符 -->
<view :class="{ 'mask-template1': !edit, 'mask-template2': edit }"></view>
</view> </view>
</template> </template>
...@@ -57,7 +56,7 @@ export default { ...@@ -57,7 +56,7 @@ export default {
title: title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来", "wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("@/static/images/brank/thumb.png"), images: require("@/static/images/brank/thumb.png"),
show: false, show: false, //这个传过去判断滑出删除其他的要不要关闭的
browseImg: require("@/static/images/brank/blackxin.png"), browseImg: require("@/static/images/brank/blackxin.png"),
name: "apple", name: "apple",
checked: false, checked: false,
...@@ -92,10 +91,11 @@ export default { ...@@ -92,10 +91,11 @@ export default {
], ],
// 编辑点击 // 编辑点击
edit: false, edit: false,
// 全选 // 弹出全选
// allchecked: false, playCheckout: false,
}; };
}, },
computed: {},
methods: { methods: {
// 编辑 // 编辑
editorClick() { editorClick() {
...@@ -105,7 +105,7 @@ export default { ...@@ -105,7 +105,7 @@ export default {
completeClick() { completeClick() {
this.edit = false; this.edit = false;
}, },
// 选中某个复选框时，由checkbox时触发 // 弹出垮选中某个复选框时，由checkbox时触发
// checkboxChange(e) { // checkboxChange(e) {
// // 全选操作 // // 全选操作
// if (e.name == "全选") { // if (e.name == "全选") {
...@@ -125,6 +125,15 @@ export default { ...@@ -125,6 +125,15 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 底部占位符
.mask-template1 {
width: 100%;
height: 100rpx;
}
.mask-template2 {
width: 100%;
height: 200rpx;
}
.collect { .collect {
height: 100%; height: 100%;
position: relative; position: relative;
...@@ -133,70 +142,73 @@ export default { ...@@ -133,70 +142,73 @@ export default {
margin-top: 16rpx; margin-top: 16rpx;
position: relative; position: relative;
margin-bottom: 36rpx; 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;
}
} }
.text1 { //头部旗帜店名
width: 160rpx; .flagname {
height: 56rpx; width: 144px;
font-size: 40rpx; font-size: 16px;
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-family: PingFangSC, PingFangSC-Medium;
font-weight: 700; font-weight: 700;
text-align: right;
color: rgba(0, 0, 0, 0.6);
line-height: 40rpx;
position: absolute;
right: 30rpx;
bottom: 0;
} }
// // 底部地位 // 底部弹出的位置
// .posi { .posi {
// position: absolute; position: fixed;
// bottom: 0; bottom: 100rpx;
// .pop-up { height: 100rpx;
// position: relative; width: 100%;
// height: 100%; background-color: white;
// .checkStyle { .pop-up {
// position: absolute; position: relative;
// left: 59rpx; height: 100%;
// top: 50%; .checkStyle {
// transform: translateY(-50%); position: absolute;
// } left: 59rpx;
// .bttn { top: 50%;
// width: 160rpx; transform: translateY(-50%);
// height: 64rpx; }
// position: absolute; .bttn {
// right: 30rpx; width: 160rpx;
// top: 50%; height: 64rpx;
// transform: translateY(-50%); position: absolute;
// } right: 30rpx;
// } top: 50%;
// } transform: translateY(-50%);
} }
//头部旗帜店名 }
.flagname { }
width: 144px;
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 700;
} }
</style> </style>
src/pages/brands/components/browseItem.vue
View file @ 8ffbf5b1
<template> <template>
<!-- 浏览记录组件 --> <!-- 浏览记录组件和收藏 -->
<view class="browse"> <view class="browse">
<u-card :head-border-bottom="false"> <u-card :head-border-bottom="false">
<!-- 头部 --> <!-- 头部 -->
<view slot="head"> <view slot="head">
<view> <view>
<!-- 全选框 -->
<u-checkbox-group v-if="edit"> <u-checkbox-group v-if="edit">
<u-checkbox <u-checkbox
@change="checkboxChange"
v-model="allchecked" v-model="allchecked"
name="全选" name="全选"
shape="circle" shape="circle"
...@@ -32,14 +32,17 @@ ...@@ -32,14 +32,17 @@
<!-- 多选框 --> <!-- 多选框 -->
<u-checkbox-group v-if="edit"> <u-checkbox-group v-if="edit">
<u-checkbox <u-checkbox
@change="checkboxChange"
v-model="item.checked" v-model="item.checked"
name="item.name" name="item.name"
shape="circle" shape="circle"
></u-checkbox> ></u-checkbox>
</u-checkbox-group> </u-checkbox-group>
<!-- 照片 --> <!-- 照片 -->
<image class="imges" :src="item.images" /> <!-- <image class="imges" :src="item.images" /> -->
<image
class="imges"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644931622&t=9c5aebc238749b4bc123b4663bc89cb1"
/>
<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 --> <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
<view class="title-wrap"> <view class="title-wrap">
<view class="title">{{ item.title }}</view> <view class="title">{{ item.title }}</view>
...@@ -50,12 +53,12 @@ ...@@ -50,12 +53,12 @@
<!-- 是否需要爱心 --> <!-- 是否需要爱心 -->
<view v-if="isbrowse"> <view v-if="isbrowse">
<image <image
@click="browerClick(index, $event)" @click="browerClick(index)"
:src="item.browseImg" :src="item.browseImg"
v-if="islove" v-if="islove"
></image> ></image>
<image <image
@click="browerClick(index, $event)" @click="browerClick(index)"
src="@/static/images/brank/lightxin.png" src="@/static/images/brank/lightxin.png"
v-else v-else
></image> ></image>
...@@ -71,47 +74,28 @@ ...@@ -71,47 +74,28 @@
</u-swipe-action> </u-swipe-action>
</view> </view>
</u-card> </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> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
//是否显示爱心
isbrowse: { isbrowse: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// 点击编辑的时候的显隐
edit: { edit: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// 数据
list: { type: Array }, list: { type: Array },
options: { type: Array }, options: { type: Array },
}, },
data() { data() {
return { return {
show: false,
// 爱心的黑暗显影 // 爱心的黑暗显影
islove: false, islove: false,
//全选 //全选
...@@ -119,22 +103,6 @@ export default { ...@@ -119,22 +103,6 @@ export default {
}; };
}, },
methods: { 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) { browerClick(i, e) {
console.log(i, e); console.log(i, e);
...@@ -213,7 +181,6 @@ export default { ...@@ -213,7 +181,6 @@ export default {
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
margin-left: 10rpx; margin-left: 10rpx;
} }
// 款号 // 款号
.modelno { .modelno {
height: 40rpx; height: 40rpx;
...@@ -231,6 +198,7 @@ export default { ...@@ -231,6 +198,7 @@ export default {
.fabric { .fabric {
margin-top: 6rpx; margin-top: 6rpx;
} }
//款号面料
.textStyle1 { .textStyle1 {
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
} }
...@@ -241,28 +209,7 @@ export default { ...@@ -241,28 +209,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
::v-deep .u-border-bottom {
// 底部地位 padding-left: 0rpx;
.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> </style>
src/pages/brands/components/hotStyle.vue
View file @ 8ffbf5b1
...@@ -3,25 +3,22 @@ ...@@ -3,25 +3,22 @@
<image <image
@click="tabdetail" @click="tabdetail"
class="indexhot" class="indexhot"
src="../../../static/images/brank/mei1.jpg" src="@/static/images/brank/mei1.jpg"
></image> ></image>
<view class="hotborder"> <view class="hotborder">
<view class="hotText1">男装-上装-青年-时尚休闲</view> <view class="hotText1">男装-上装-青年-时尚休闲</view>
<view class="hotText2"> <view class="hotText2">
<image <image class="iconhot" src="@/static/images/brank/mei1.jpg"></image>
class="iconhot"
src="../../../static/images/brank/mei1.jpg"
></image>
<text class="wen">我的文字是dsadasdasddsads</text> <text class="wen">我的文字是dsadasdasddsads</text>
<image <image
class="iconLove" class="iconLove"
src="../../../static/images/brank/blackxin.png" src="@/static/images/brank/blackxin.png"
v-if="ImageBool" v-if="ImageBool"
@click="tabImage" @click="tabImage"
></image> ></image>
<image <image
class="iconLove" class="iconLove"
src="../../../static/images/brank/lightxin.png" src="@/static/images/brank/lightxin.png"
v-else v-else
@click="tabImage" @click="tabImage"
></image> ></image>
...@@ -42,6 +39,11 @@ export default { ...@@ -42,6 +39,11 @@ export default {
// 点击切换心心选项 // 点击切换心心选项
tabImage() { tabImage() {
this.ImageBool = !this.ImageBool; this.ImageBool = !this.ImageBool;
if (this.ImageBool == false) {
this.$u.toast(`已收藏款式`);
} else {
this.$u.toast(`已取消收藏`);
}
}, },
// 跳转到详情 // 跳转到详情
tabdetail() { tabdetail() {
......
src/pages/brands/detail.vue
View file @ 8ffbf5b1
<template> <template>
<view> <view>
<!-- <u-navbar title="" :border-bottom="false" :background="background"> <u-navbar
</u-navbar> --> title=""
:border-bottom="false"
background="rgba(245,245,245,0)"
style="height: 0px"
>
</u-navbar>
<view> <view>
<u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image> <u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image>
</view> </view>
...@@ -34,7 +39,10 @@ ...@@ -34,7 +39,10 @@
<view class="image-tip u-line-1">颜色</view> <view class="image-tip u-line-1">颜色</view>
</view> </view>
<view class="image u-m-r-10"> <view class="image u-m-r-10">
<image src="" style="width: 100%; height: 100%"></image> <image
src="@/static/images/brank/mei1.jpg"
style="width: 100%; height: 100%"
></image>
<view class="image-tip u-line-1">颜色</view> <view class="image-tip u-line-1">颜色</view>
</view> </view>
<view class="image u-m-r-10"> <view class="image u-m-r-10">
...@@ -46,6 +54,8 @@ ...@@ -46,6 +54,8 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view>
<view class="sampling"> <view class="sampling">
<u-button>我要采购布样</u-button> <u-button>我要采购布样</u-button>
</view> </view>
...@@ -83,6 +93,10 @@ $main-color: #fff; ...@@ -83,6 +93,10 @@ $main-color: #fff;
color: #333333; color: #333333;
} }
// 我要采购布样 // 我要采购布样
.mask-template {
width: 750rpx;
height: 100rpx;
}
.sampling { .sampling {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -90,6 +104,8 @@ $main-color: #fff; ...@@ -90,6 +104,8 @@ $main-color: #fff;
height: 100rpx; height: 100rpx;
background: #ffffff; background: #ffffff;
box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1); box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
display: flex;
align-items: center;
.u-btn { .u-btn {
width: 630rpx; width: 630rpx;
height: 88rpx; height: 88rpx;
......
src/pages/brands/everyDay.vue
View file @ 8ffbf5b1
...@@ -28,6 +28,7 @@ export default { ...@@ -28,6 +28,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .u-card__body { ::v-deep .u-card__body {
padding-top: 20rpx !important; padding-top: 20rpx !important;
background-color: #f5f5f5;
} }
::v-deep .u-card__head { ::v-deep .u-card__head {
padding: 0rpx !important; padding: 0rpx !important;
...@@ -35,6 +36,6 @@ export default { ...@@ -35,6 +36,6 @@ export default {
.hotFlex { .hotFlex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-between;
} }
</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