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 @@
</view>
</u-card>
</view>
<!-- 底部占位符 -->
<view class="mask-template"></view>
</view>
</template>
......@@ -77,8 +79,10 @@ export default {
</script>
<style lang="scss" scoped>
.brandsindex {
height: 100%;
// 底部占位符
.mask-template {
width: 100%;
height: 100rpx;
}
//头部
.back_img {
......@@ -116,7 +120,6 @@ export default {
.hotstyle {
::v-deep .u-card__body {
padding-top: 24rpx !important;
margin-bottom: 70rpx;
}
::v-deep .u-card__head {
padding-bottom: 0rpx !important;
......
src/pages/brands/browse.vue
View file @ 8ffbf5b1
<template>
<!-- 我的收藏
<!-- 浏览记录
isbrowse传给子组件判断是否需要爱心 默认false
editor 出现checkout的bool 默认false
list传过去的数据 Array
......@@ -9,7 +9,7 @@
<browse-item :isbrowse="true" :list="list">
<!-- 头部插槽 -->
<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>
</template>
</browse-item>
......@@ -57,6 +57,12 @@ export default {
//组件头部时间图标
.browseicon {
width: 32rpx;
::v-deep .u-icon {
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: red;
}
}
//组件头部时间
.browseTime {
......
src/pages/brands/collection.vue
View file @ 8ffbf5b1
......@@ -13,35 +13,34 @@
<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>
<view class="collect-body">
<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 class="posi" v-show="edit">
<view class="pop-up">
<u-checkbox-group class="checkStyle">
<u-checkbox v-model="playCheckout" 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>
</template>
......@@ -57,7 +56,7 @@ export default {
title:
"wos长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来",
images: require("@/static/images/brank/thumb.png"),
show: false,
show: false, //这个传过去判断滑出删除其他的要不要关闭的
browseImg: require("@/static/images/brank/blackxin.png"),
name: "apple",
checked: false,
......@@ -92,10 +91,11 @@ export default {
],
// 编辑点击
edit: false,
// 全选
// allchecked: false,
// 弹出全选
playCheckout: false,
};
},
computed: {},
methods: {
// 编辑
editorClick() {
......@@ -105,7 +105,7 @@ export default {
completeClick() {
this.edit = false;
},
// 选中某个复选框时，由checkbox时触发
// 弹出垮选中某个复选框时，由checkbox时触发
// checkboxChange(e) {
// // 全选操作
// if (e.name == "全选") {
......@@ -125,6 +125,15 @@ export default {
</script>
<style lang="scss" scoped>
// 底部占位符
.mask-template1 {
width: 100%;
height: 100rpx;
}
.mask-template2 {
width: 100%;
height: 200rpx;
}
.collect {
height: 100%;
position: relative;
......@@ -133,70 +142,73 @@ export default {
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;
}
}
.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;
//头部旗帜店名
.flagname {
width: 144px;
font-size: 16px;
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;
// 底部弹出的位置
.posi {
position: fixed;
bottom: 100rpx;
height: 100rpx;
width: 100%;
background-color: white;
.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/browseItem.vue
View file @ 8ffbf5b1
<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"
......@@ -32,14 +32,17 @@
<!-- 多选框 -->
<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" />
<!-- <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在此为必写的，否则可能会出现标题定位错误 -->
<view class="title-wrap">
<view class="title">{{ item.title }}</view>
......@@ -50,12 +53,12 @@
<!-- 是否需要爱心 -->
<view v-if="isbrowse">
<image
@click="browerClick(index, $event)"
@click="browerClick(index)"
:src="item.browseImg"
v-if="islove"
></image>
<image
@click="browerClick(index, $event)"
@click="browerClick(index)"
src="@/static/images/brank/lightxin.png"
v-else
></image>
......@@ -71,47 +74,28 @@
</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,
//全选
......@@ -119,22 +103,6 @@ export default {
};
},
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);
......@@ -213,7 +181,6 @@ export default {
color: rgba(0, 0, 0, 1);
margin-left: 10rpx;
}
// 款号
.modelno {
height: 40rpx;
......@@ -231,6 +198,7 @@ export default {
.fabric {
margin-top: 6rpx;
}
//款号面料
.textStyle1 {
color: rgba(0, 0, 0, 0.4);
}
......@@ -241,28 +209,7 @@ export default {
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%);
}
}
::v-deep .u-border-bottom {
padding-left: 0rpx;
}
</style>
src/pages/brands/components/hotStyle.vue
View file @ 8ffbf5b1
......@@ -3,25 +3,22 @@
<image
@click="tabdetail"
class="indexhot"
src="../../../static/images/brank/mei1.jpg"
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>
<image class="iconhot" src="@/static/images/brank/mei1.jpg"></image>
<text class="wen">我的文字是dsadasdasddsads</text>
<image
class="iconLove"
src="../../../static/images/brank/blackxin.png"
src="@/static/images/brank/blackxin.png"
v-if="ImageBool"
@click="tabImage"
></image>
<image
class="iconLove"
src="../../../static/images/brank/lightxin.png"
src="@/static/images/brank/lightxin.png"
v-else
@click="tabImage"
></image>
......@@ -42,6 +39,11 @@ export default {
// 点击切换心心选项
tabImage() {
this.ImageBool = !this.ImageBool;
if (this.ImageBool == false) {
this.$u.toast(`已收藏款式`);
} else {
this.$u.toast(`已取消收藏`);
}
},
// 跳转到详情
tabdetail() {
......
src/pages/brands/detail.vue
View file @ 8ffbf5b1
<template>
<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>
<u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image>
</view>
......@@ -34,7 +39,10 @@
<view class="image-tip u-line-1">颜色</view>
</view>
<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>
<view class="image u-m-r-10">
......@@ -46,6 +54,8 @@
</view>
</view>
</view>
<!-- 这个空的是为了让下面那个不盖住内容 -->
<view class="mask-template"></view>
<view class="sampling">
<u-button>我要采购布样</u-button>
</view>
......@@ -83,6 +93,10 @@ $main-color: #fff;
color: #333333;
}
// 我要采购布样
.mask-template {
width: 750rpx;
height: 100rpx;
}
.sampling {
position: fixed;
bottom: 0;
......@@ -90,6 +104,8 @@ $main-color: #fff;
height: 100rpx;
background: #ffffff;
box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
display: flex;
align-items: center;
.u-btn {
width: 630rpx;
height: 88rpx;
......
src/pages/brands/everyDay.vue
View file @ 8ffbf5b1
......@@ -28,6 +28,7 @@ export default {
<style lang="scss" scoped>
::v-deep .u-card__body {
padding-top: 20rpx !important;
background-color: #f5f5f5;
}
::v-deep .u-card__head {
padding: 0rpx !important;
......@@ -35,6 +36,6 @@ export default {
.hotFlex {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-between;
}
</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