xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商城测试版v8_1

Browse Source
This commit is contained in:
cheng
2022-07-30 17:11:42 +08:00
parent e2b0b0c52b
commit 09e34ecabe
39 changed files with 3360 additions and 3274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/searchList/hightSearchList.module.scss
+201 -201
View File
@@ -1,214 +1,214 @@
.main{
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
.search{
padding: 20px;
.SearchInput{
background-color: #fff;
padding: 10px 20px;
box-sizing: border-box;
border-radius: 10px;
}
.bluetooth_color{
.color_bock{
width: 100px;
height: 46px;
}
.color_bock_no{
font-size: $font_size_medium;
color: $color_font_three;
}
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
.search {
padding: 20px;
.SearchInput {
background-color: #fff;
padding: 10px 20px;
box-sizing: border-box;
border-radius: 10px;
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 130px;
.bluetooth_color {
.color_bock {
width: 100px;
height: 46px;
}
.color_bock_no {
font-size: $font_size_medium;
color: $color_font_three;
}
}
}
.filter {
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 130px;
font-size: $font_size_medium;
color: $color_font_three;
.text_zh,
.text_sc {
color: $color_main;
display: flex;
align-items: center;
.sortIcon {
display: flex;
flex-direction: column;
position: relative;
.icon_one {
font-size: $font_size_medium;
color: $color_font_three;
.text_zh, .text_sc{
color: $color_main;
display: flex;
align-items: center;
.sortIcon{
display: flex;
flex-direction: column;
position: relative;
.icon_one{
font-size: $font_size_medium;
position: absolute;
margin:auto;
top:0;
}
}
}
.text_ss{
position: relative;
.miconfont{
font-size: 20px;
margin-left: 5px;
}
&::before{
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
position: absolute;
top: 0;
left: -30px;
}
}
position: absolute;
margin: auto;
top: 0;
}
}
.filter_btn_con{
display: flex;
justify-content: space-between;
align-items: center;
height: 86px;
}
.text_ss {
position: relative;
.miconfont {
font-size: 20px;
margin-left: 5px;
}
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
&::before {
content: '';
width: 2px;
height: 32px;
background-color: #c2c2c2;
position: absolute;
top: 0;
left: -30px;
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 20px;
flex:1;
view{
font-size: $font_size_medium;
background-color: #F0F0F0;
border-radius: 24px;
min-width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
&:nth-last-child(n+2) {
margin-right: 10px;
}
&:nth-last-child(1) {
margin-right: 30px;
}
}
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
}
.filter_btn_con {
display: flex;
justify-content: space-between;
align-items: center;
height: 86px;
}
.filter_scroll {
flex: 1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
}
.filter_btn {
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 20px;
flex: 1;
view {
font-size: $font_size_medium;
background-color: #f0f0f0;
border-radius: 24px;
min-width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
&:nth-last-child(n + 2) {
margin-right: 10px;
}
.filter_more{
font-size: $font_size_medium;
color: $color_font_three;
padding: 0 30px 0 20px;
position: relative;
&:nth-last-child(1) {
margin-right: 30px;
}
}
.selected {
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
.filter_more {
font-size: $font_size_medium;
color: $color_font_three;
padding: 0 30px 0 20px;
position: relative;
height: 100%;
line-height: 86px;
&::before {
content: '';
opacity: 1;
width: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60%);
// z-index: 99;
}
.miconfont {
font-size: 27px;
}
}
}
.list {
height: calc(100vh - 440px);
.list_num {
font-size: $font_size_min;
color: $color_font_two;
padding: 10px 38px;
border-bottom: 1px solid rgb(233, 233, 233);
}
.scroll {
height: 100%;
padding-top: 3px;
}
.product_list {
padding: 38px;
display: grid;
grid-template-columns: 321px 321px;
justify-content: space-between;
.product_item {
width: 321px;
background-color: #fff;
border-radius: 20px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.product_img {
width: 100%;
height: 224px;
border-radius: 20px 20px 0px 0px;
position: relative;
image {
width: 100%;
height: 100%;
line-height: 86px;
&::before{
content: '';
opacity: 1;
width: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
// z-index: 99;
}
.miconfont{
font-size: 27px;
}
}
}
.list{
height: calc(100vh - 440px);
.list_num {
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0, 0, 0, 0.5);
border-radius: 0px 50px 0px 30px;
font-size: $font_size_min;
color:$color_font_two;
padding: 10px 38px;
border-bottom: 1PX solid rgb(233, 233, 233);
color: #fff;
position: absolute;
left: 0;
bottom: 0;
padding: 5px 20px;
box-sizing: border-box;
}
}
.scroll{
height: 100%;
padding-top: 3px;
}
.product_info {
padding: 20px;
.title {
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis();
}
.product_list{
padding: 38px;
display: grid;
grid-template-columns: 321px 321px;
justify-content: space-between;
.product_item{
width: 321px;
background-color: #fff;
border-radius: 20px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) ;
.product_img{
width: 100%;
height: 224px;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 0px 50px 0px 30px;
font-size: $font_size_min;
color: #fff;
position: absolute;
left:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{
padding: 20px;
.title{
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis()
}
.tag_list{
display: flex;
margin-top: 16px;
.tag{
padding: 3px 10px;
background-color: #CDE5FF;
font-size: $font_size_min;
border-radius: 5px;
color: $color_main;
&:nth-child(2) {
margin-left: 10px;
}
}
}
.introduce{
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis()
}
.tag_list {
display: flex;
margin-top: 16px;
.tag {
padding: 3px 10px;
background-color: #cde5ff;
font-size: $font_size_min;
border-radius: 5px;
color: $color_main;
&:nth-child(2) {
margin-left: 10px;
}
}
}
.introduce {
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis();
}
}
}
}
}
}
src/pages/searchList/searchList.module.scss
+188 -188
View File
@@ -1,198 +1,198 @@
.main{
display: flex;
flex-direction: column;
height: 100vh;
background-color: #F8F8F8;
.search{
padding: 20px;
.main {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f8f8f8;
.search {
padding: 20px;
}
.filter {
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.text_zh,
.text_sc {
color: $color_main;
display: flex;
align-items: center;
.sortIcon {
display: flex;
flex-direction: column;
position: relative;
.icon_one {
font-size: $font_size_medium;
position: absolute;
margin: auto;
top: 0;
}
}
}
.text_ss {
position: relative;
.miconfont {
font-size: 30px;
margin-left: 5px;
}
&::before {
content: '';
width: 2px;
height: 32px;
background-color: #c2c2c2;
position: absolute;
top: 0;
left: -30px;
}
}
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.text_zh, .text_sc{
color: $color_main;
display: flex;
align-items: center;
.sortIcon{
display: flex;
flex-direction: column;
position: relative;
.icon_one{
font-size: $font_size_medium;
position: absolute;
margin:auto;
top:0;
}
}
}
.text_ss{
position: relative;
.miconfont{
font-size: 30px;
margin-left: 5px;
}
&::before{
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
position: absolute;
top: 0;
left: -30px;
}
}
.filter_btn_con {
display: flex;
justify-content: space-between;
align-items: center;
height: 86px;
}
.filter_scroll {
flex: 1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
}
.filter_btn {
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 20px;
flex: 1;
view {
font-size: $font_size_medium;
background-color: #f0f0f0;
border-radius: 24px;
min-width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
&:nth-last-child(n + 2) {
margin-right: 10px;
}
.filter_btn_con{
display: flex;
justify-content: space-between;
align-items: center;
height: 86px;
&:nth-last-child(1) {
margin-right: 30px;
}
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 20px;
flex:1;
view{
font-size: $font_size_medium;
background-color: #F0F0F0;
border-radius: 24px;
min-width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
&:nth-last-child(n+2) {
margin-right: 10px;
}
&:nth-last-child(1) {
margin-right: 30px;
}
}
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
.filter_more{
font-size: $font_size_medium;
color: $color_font_three;
padding: 0 30px 0 20px;
position: relative;
}
.selected {
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
.filter_more {
font-size: $font_size_medium;
color: $color_font_three;
padding: 0 30px 0 20px;
position: relative;
height: 100%;
line-height: 86px;
&::before {
content: '';
opacity: 1;
width: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60%);
// z-index: 99;
}
.miconfont {
font-size: 27px;
}
}
}
.list {
height: calc(100vh - 330px);
.list_num {
font-size: $font_size_min;
color: $color_font_two;
padding: 10px 38px;
border-bottom: 1px solid #e9e9e9;
}
.scroll {
height: 100%;
padding-top: 3px;
}
.product_list {
padding: 38px;
display: grid;
grid-template-columns: 321px 321px;
justify-content: space-between;
.product_item {
width: 321px;
background-color: #fff;
border-radius: 20px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.product_img {
width: 100%;
height: 224px;
border-radius: 20px 20px 0px 0px;
position: relative;
image {
width: 100%;
height: 100%;
line-height: 86px;
&::before{
content: '';
opacity: 1;
width: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
// z-index: 99;
}
.miconfont{
font-size: 27px;
}
}
}
.list{
height: calc(100vh - 330px);
.list_num {
border-radius: 20px;
}
.color_num {
background: rgba(0, 0, 0, 0.5);
border-radius: 50px 0px 0px 0px;
font-size: $font_size_min;
color:$color_font_two;
padding: 10px 38px;
border-bottom: 1PX solid #e9e9e9;
color: #fff;
position: absolute;
right: 0;
bottom: 0;
padding: 5px 20px;
box-sizing: border-box;
}
}
.scroll{
height: 100%;
padding-top: 3px;
}
.product_info {
padding: 20px;
.title {
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis();
}
.product_list{
padding: 38px;
display: grid;
grid-template-columns: 321px 321px;
justify-content: space-between;
.product_item{
width: 321px;
background-color: #fff;
border-radius: 20px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1) ;
.product_img{
width: 100%;
height: 224px;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{
padding: 20px;
.title{
font-size: $font_size;
color: $color_font_three;
@include common_ellipsis();
}
.tag_list{
display: flex;
margin-top: 16px;
.tag{
padding: 3px 10px;
background-color: #CDE5FF;
font-size: $font_size_min;
border-radius: 5px;
color: $color_main;
@include common_ellipsis();
&:nth-child(2) {
margin-left: 10px;
}
}
}
.introduce{
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis();
}
.tag_list {
display: flex;
margin-top: 16px;
.tag {
padding: 3px 10px;
background-color: #cde5ff;
font-size: $font_size_min;
border-radius: 5px;
color: $color_main;
@include common_ellipsis();
&:nth-child(2) {
margin-left: 10px;
}
}
}
.introduce {
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
@include common_ellipsis();
}
}
}
}
}
}