product_platform/yxt-yythmall-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

样式整理

Browse Source
This commit is contained in:
yxt_njy
2024-01-20 17:15:05 +08:00
parent 93492d03f1
commit 4b9537e675
1 changed files with 99 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
pages/home/myCellar.vue
View File

@@ -1,27 +1,16 @@
<template>
<view
style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
<view id="page">
<!-- 顶部 -->
<view class="top">
<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
</view>
<view style="background: #fff; height: calc(100vh - 45px - 50vw);width: 100%; border-radius: 15px;display: flex;flex-direction: column; box-sizing: border-box;margin-top: -15px;box-sizing: border-box;">
<!-- <view style="display: flex;flex-direction: row;height: 25px; width: 100%; flex-shrink: 0;">
<view style="width: 20%;background: #F7F7F7;border-top-left-radius: 25px;"></view>
<view style="width: 80%;background: #fff; border-top-right-radius: 25px;"></view>
</view> -->
<!-- 功能区 -->
<view class="func-area">
<view class="center">
<!-- 左侧菜单 -->
<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
<!-- 左侧菜单区 -->
<view class="menu-area">
<!-- <text style="font-weight: 600;font-family: sans-serif;
color: #333;
font-size: 15px;
@@ -50,15 +39,19 @@
</view>
</scroll-view> -->
<!-- 左侧菜单列表 -->
<view style="width: 100%;display: flex;flex-direction: column; ">
<view v-for="(item,index) in data" @click="labelClick(index,item)" style="display: flex;flex-direction: column;justify-content: center;">
<text class="label" :class="{'label2':selectIndex==index}">{{item.name}}</text>
</view>
<scroll-view scroll-y="true" style="height: 100%; width: 100%;border-bottom-left-radius: 25px;"
:scroll-top="scrollLeftTop" bindscrolltoupper="upper" bindscrolltolower="lower"
:show-scrollbar="false" :enhanced="true" bindscroll="scroll">
<view class="menu">
<view v-for="(item,index) in data" @click="labelClick(index,item)" class="method">
<text class="label" :class="{'label-selected':selectIndex==index}">{{item.name}}</text>
<view v-if="item.count>0" class="goods-count">{{item.count}}</view>
</view>
</view>
</scroll-view>
</view>
<view style="width: 78%;background-color: #fff;overflow-y: auto;">
<scroll-view scroll-y="true" style="height: 100%; width: 100%;" bindscrolltoupper="upper"
@@ -531,6 +524,14 @@
</script>
<style>
#page{
display: flex;
flex-direction: column;
height: 100vh;
background: -webkit-linear-gradient(left,#FEA65F,#FB9440);
}
/* 顶部 */
.top {
width: 100vw;
/* height: 126.66vw; */
@@ -541,7 +542,80 @@
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
}
/* 功能区 */
.func-area{
background: #fff;
height: calc(100vh - 45px - 50vw);
width: 100%;
border-radius: 15px;
display: flex;
flex-direction: column;
box-sizing: border-box;
margin-top: -15px;
box-sizing: border-box;
}
/* 功能区-菜单区 */
.func-area .menu-area{
width: 22%;
display: flex;
flex-direction: column;
overflow-y: auto;
padding-top: 10px;
}
/* 功能区-菜单区-菜单 */
.func-area .menu-area .menu{
width: 100%;
display: flex;
flex-direction: column;
}
/* 功能区-菜单区-菜单-显示方法 */
.func-area .menu-area .menu .method{
display: flex;
flex-direction: column;
justify-content: center;
}
/* 功能区-菜单区-菜单-标签 */
.func-area .menu-area .menu .label{
color: #191919;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
padding-top: 7px;
padding-bottom: 7px;
margin-left: 5px;
}
/* 功能区-菜单区-菜单-标签选中 */
.func-area .menu-area .menu .label-selected{
background: #FFF;
color: #FFF;
background-color: #FF9900;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-weight: bold;
border-radius: 20px;
margin-left: 5px;
}
/* 功能区-菜单区-菜单-商品数量 */
.func-area .menu-area .menu .goods-count{
border-radius: 50%;
text-align: center;
background: #f00;
color: #fff;
font-size: 8px;
position: absolute;
top: 8px;
right: 3px;
padding: 2px 5px;
width: auto;
}
/* .label {
background: #fff;
color: #FF9900;
@@ -559,30 +633,7 @@
padding-bottom: 15px;
text-align: center;
} */
.label {
color: #191919;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
padding-top: 7px;
padding-bottom: 7px;
margin-left: 5px;
}
.label2 {
background: #FFF;
color: #FFF;
background-color: #FF9900;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-weight: bold;
border-radius: 20px;
margin-left: 5px;
}
.center {
display: flex;
flex-direction: row;