Skip to content

肖康 / H5_2.0

Go to a project
Commit 5b99ea01 by LJM
Options

css

parent 1e4dac6e
Inline Side-by-side
Showing with 290 additions and 253 deletions
assets/css/index/index.scss
.indexPage{
.indexPage {
padding-bottom: 100rpx;
background:#fff;
background: #fff;
}
.header{
.header {
height: 466rpx;
background: linear-gradient(200deg, #D6E8FF 0%, #FFFFFF 100%);
&.fixedtop{
background: linear-gradient(200deg, #d6e8ff 0%, #ffffff 100%);
&.fixedtop {
padding-top: 88rpx;
.search-topb{
.search-topb {
position: fixed;
top:0rpx;
left:0rpx;
top: 0rpx;
left: 0rpx;
background: #fff;
z-index: 3;
.searchinput{
border:1rpx solid #F0F0F2;
.searchinput {
border: 1rpx solid #f0f0f2;
}
}
}
.search-topb{
width:750rpx;
.search-topb {
width: 750rpx;
height: 88rpx;
padding:11rpx 0;
padding-left:32rpx;
padding-right:24rpx;
padding: 11rpx 0;
padding-left: 32rpx;
padding-right: 24rpx;
box-sizing: border-box;
image{
width:120rpx;
height:58rpx;
image {
width: 120rpx;
height: 58rpx;
display: block;
flex-shrink:0;
flex-shrink: 0;
position: relative;
top:4rpx;
top: 4rpx;
}
.searchinput{
.searchinput {
width: 388rpx;
height: 66rpx;
background: #FFFFFF;
background: #ffffff;
border-radius: 33rpx;
line-height: 66rpx;
margin-left: 39rpx;
flex-shrink:0;
.seartext{
color:#c2c4cc;
flex-shrink: 0;
.seartext {
color: #c2c4cc;
font-size: 34rpx;
margin-left: 16rpx;
margin-right: 11rpx;
}
input{
height:66rpx;
input {
height: 66rpx;
font-size: 24rpx;
line-height: 66rpx;
width:264rpx;
color:$uni-color333;
flex-shrink:0;
width: 264rpx;
color: $uni-color333;
flex-shrink: 0;
}
}
.newsbox{
height:66rpx;
.newsbox {
height: 66rpx;
line-height: 66rpx;
margin-left: 37rpx;
position: relative;
.icon{
.icon {
font-size: 44rpx;
color:$uni-color333;
color: $uni-color333;
}
.counts{
.counts {
width: 46rpx;
height: 32rpx;
background: #FF3700;
background: #ff3700;
border-radius: 16rpx;
border: 2rpx solid #FFFFFF;
border: 2rpx solid #ffffff;
position: absolute;
right:5rpx;
top:0rpx;
color:#fff;
right: 5rpx;
top: 0rpx;
color: #fff;
font-size: 24rpx;
line-height: 28rpx;
text-align: center;
}
}
.cdbox{
height:66rpx;
.cdbox {
height: 66rpx;
line-height: 66rpx;
position: relative;
left:6rpx;
.icon{
left: 6rpx;
.icon {
font-size: 44rpx;
color:$uni-color333;
color: $uni-color333;
}
.sj{
.sj {
position: absolute;
border-style: solid;
border-width: 10rpx;
border-color:transparent transparent #292B33 transparent ;
top:57rpx;
left:10rpx;
border-color: transparent transparent #292b33 transparent;
top: 57rpx;
left: 10rpx;
display: none;
}
.cdcons{
.cdcons {
position: absolute;
width: 200rpx;
background: #292B33;
background: #292b33;
border-radius: 10px;
padding:0 24rpx;
padding: 0 24rpx;
padding-bottom: 10rpx;
display: none;
top:75rpx;
left:-150rpx;
top: 75rpx;
left: -150rpx;
z-index: 2;
a{
height:73rpx;
a {
height: 73rpx;
display: block;
width: 152rpx;
border-bottom: 1rpx solid #484B59;
color:#fff;
border-bottom: 1rpx solid #484b59;
color: #fff;
line-height: 72rpx;
font-size: 24rpx;
&:last-child{
border:0rpx;
&:last-child {
border: 0rpx;
}
}
}
&:hover{
.cdcons,.sj{display: block;}
&:hover {
.cdcons,
.sj {
display: block;
}
}
}
.tipsad{
}
.tipsad {
width: 702rpx;
height:77rpx;
height: 77rpx;
line-height: 77rpx;
font-size: 22rpx;
color:$uni-color999;
margin:0 auto;
.icon{margin-right: 6rpx;color:#23a8f6;font-size: 24rpx;}
}
.bannerbox{
width:702rpx;
margin:0 auto;
height:302rpx;
color: $uni-color999;
margin: 0 auto;
.icon {
margin-right: 6rpx;
color: #23a8f6;
font-size: 24rpx;
}
}
.bannerbox {
width: 702rpx;
margin: 0 auto;
height: 302rpx;
overflow: hidden;
border-radius: 10rpx;
swiper{height:302rpx;}
a{
swiper {
height: 302rpx;
}
a {
display: block;
width:702rpx;
height:100%;
width: 702rpx;
height: 100%;
overflow: hidden;
image{
image {
display: block;
width:702rpx;
height:302rpx;
width: 702rpx;
height: 302rpx;
}
}
}
}
.ggbox{
width:702rpx;
margin:0 auto;
height:42px;
border-bottom: 1px solid #F0F0F2;
.ggbox {
width: 702rpx;
margin: 0 auto;
height: 42px;
border-bottom: 1px solid #f0f0f2;
line-height: 42px;
color:$uni-color666;
color: $uni-color666;
font-size: 24rpx;
box-sizing: border-box;
.ggcons{
.ggcons {
position: relative;
overflow-y: hidden;
width:676rpx;
height:16px;
width: 676rpx;
height: 16px;
box-sizing: border-box;
.ggsec{
.ggsec {
position: absolute;
width:100%;
width: 100%;
transition: all 1s;
a{
cursor: pointer;height:16px;color: #484B59;font-size: 24rpx;line-height: 16px;
.titletext{max-width:620rpx;height:16px;line-height: 16px;}
a {
cursor: pointer;
height: 16px;
color: #484b59;
font-size: 24rpx;
line-height: 16px;
.titletext {
max-width: 620rpx;
height: 16px;
line-height: 16px;
}
}
}
}
.icon{
.icon {
margin-right: 11rpx;
font-size: 32rpx;
}
}
.szbox{
width:704rpx;
margin:0 auto;
.szbox {
width: 704rpx;
margin: 0 auto;
margin-top: 27rpx;
a{
a {
display: block;
width:164rpx;
height:136rpx;
width: 164rpx;
height: 136rpx;
image{
image {
display: block;
width:164rpx;
height:100rpx;
width: 164rpx;
height: 100rpx;
margin-bottom: 6rpx;
}
.sitips{
.sitips {
text-align: center;
font-size: 22rpx;
color:$uni-color666;
color: $uni-color666;
}
}
}
.brandbox{
width:702rpx;
margin:0 auto;
.brandbox {
width: 702rpx;
margin: 0 auto;
margin-top: 42rpx;
.brand-tab{
.brand-tab {
margin-bottom: 2rpx;
.tabitem{
.tabitem {
width: 343rpx;
height: 106rpx;
background: #F0F6FF;
background: #f0f6ff;
border-radius: 10rpx 10rpx 0rpx 0rpx;
font-weight: 600;
font-size: 28rpx;
color:$uni-color333;
padding-top:20rpx;
padding-left:24rpx;
color: $uni-color333;
padding-top: 20rpx;
padding-left: 24rpx;
.hztips{
color:$uni-color999;
.hztips {
color: $uni-color999;
font-weight: 400;
font-size: 20rpx;
margin-top: 4rpx;
overflow: hidden;
height:28rpx;
height: 28rpx;
}
&.act{
background: #E6F6FF;
.hztext{
color:#23A8F6;
&.act {
background: #e6f6ff;
.hztext {
color: #23a8f6;
}
}
.hztext{
color:$uni-coloract;
.hztext {
color: $uni-coloract;
}
&.hwxhitem{
background: #Fff8f2;
.hztext{
color:$uni-colorwarning;
&.hwxhitem {
background: #fff8f2;
.hztext {
color: $uni-colorwarning;
}
}
}
}
.brand-con{
.brand-con {
width: 702rpx;
padding-top: 16rpx;
background: #E6F6FF;
background: #e6f6ff;
border-radius: 0rpx 0rpx 10rpx 10rpx;
flex-wrap: wrap;
padding-left:24rpx;
a{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 26rpx;
padding: 16rpx 24rpx 0 24rpx;
a {
width: 144rpx;
display: block;
height: 81rpx;
display: block;
margin-right: 28rpx;
margin-bottom: 16rpx;
image{
image {
width: 144rpx;
height: 81rpx;
}
}
&.brand-conxh{
background: #FFF8F2;
&.brand-conxh {
background: #fff8f2;
}
}
}
.goods-box{
.goods-box {
margin-top: 42rpx;
width: 750rpx;
height: 482rpx;
background: linear-gradient(180deg, #E6F1FF 0%, #FFFFFF 100%);
background: linear-gradient(180deg, #e6f1ff 0%, #ffffff 100%);
border-radius: 10rpx 10rpx 0rpx 0rpx;
.titg{
height:97rpx;
.titg {
height: 97rpx;
line-height: 97rpx;
padding-left: 24rpx;
font-size: 28rpx;
color:$uni-color333;
text{
color:$uni-color999;
font-size:20rpx;
color: $uni-color333;
text {
color: $uni-color999;
font-size: 20rpx;
margin-left: 10rpx;
}
}
.goods-con{
height:353rpx;
.goods-con {
height: 353rpx;
white-space: nowrap;
.goods-item{
height:353rpx;
.goods-item {
height: 353rpx;
width: 232rpx;
background: #fff;
border-radius: 6rpx;
display: inline-block;
margin-left: 16rpx;
padding:16rpx;
padding: 16rpx;
.xhg{font-size: 26rpx;font-weight: 600;color:$uni-color333;height:37rpx;line-height: 37rpx;margin-top: 36rpx;margin-bottom: 4rpx;}
.ppg{font-size: 22rpx;color:$uni-color999;height:30rpx;line-height: 30rpx;text{color:$uni-color666;}margin-bottom: 4rpx;}
.jgg{font-size: 22rpx;color:$uni-color999;height:30rpx;line-height: 30rpx;text{color:$uni-colorwarning}}
image{
.xhg {
font-size: 26rpx;
font-weight: 600;
color: $uni-color333;
height: 37rpx;
line-height: 37rpx;
margin-top: 36rpx;
margin-bottom: 4rpx;
}
.ppg {
font-size: 22rpx;
color: $uni-color999;
height: 30rpx;
line-height: 30rpx;
text {
color: $uni-color666;
}
margin-bottom: 4rpx;
}
.jgg {
font-size: 22rpx;
color: $uni-color999;
height: 30rpx;
line-height: 30rpx;
text {
color: $uni-colorwarning;
}
}
image {
width: 180rpx;
height: 180rpx;
}
&:first-child{
margin-left:24rpx;
&:first-child {
margin-left: 24rpx;
}
&:last-child{
margin-right:24rpx;
&:last-child {
margin-right: 24rpx;
}
}
}
}
.fwbox{
.fwbox {
min-height: 907rpx;
background:linear-gradient(180deg, #F5F5F7 0%, #FFFFFF 100%);
background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
border-radius: 10px 10px 0px 0px;
margin-top: 42rpx;
.fwinfo{
.fwinfo {
padding: 0 55rpx;
padding-top:52rpx;
.tiiw{
padding-top: 52rpx;
.tiiw {
font-size: 28rpx;
font-weight: 600;
color:$uni-color333;
color: $uni-color333;
text-align: center;
position: relative;
image{
width:70rpx;
height:55rpx;
image {
width: 70rpx;
height: 55rpx;
position: absolute;
left:0rpx;
top:-18rpx;
left: 0rpx;
top: -18rpx;
}
}
.finfocon{
.finfocon {
font-size: 24rpx;
line-height: 40rpx;
color:$uni-color999;
color: $uni-color999;
margin-top: 21rpx;
text-indent:2em;
text-indent: 2em;
}
.rzbox{
.rzbox {
margin-top: 31rpx;
.rzitem{
width:200rpx;
image{display: block;width:200rpx;height:113rpx;margin-bottom: 15rpx;}
text{
.rzitem {
width: 200rpx;
image {
display: block;
width: 200rpx;
height: 113rpx;
margin-bottom: 15rpx;
}
text {
font-size: 22rpx;
color:$uni-color999;
color: $uni-color999;
display: block;
text-align: center;
}
}
}
}
.videobox{
.videobox {
padding: 0 55rpx;
margin-top: 78rpx;
margin-bottom: 25rpx;
.tiib{
.tiib {
font-size: 28rpx;
font-weight: 600;
color:$uni-color333;
color: $uni-color333;
text-align: center;
position: relative;
image{
width:70rpx;
height:55rpx;
image {
width: 70rpx;
height: 55rpx;
position: absolute;
right:0rpx;
top:-18rpx;
right: 0rpx;
top: -18rpx;
}
}
}
.videoval{
.videoval {
width: 702rpx;
height: 342rpx;
margin:0 auto;
video{
margin: 0 auto;
video {
width: 702rpx;
height: 342rpx;
}
}
}
.newsbox{
width:702rpx;
margin:0 auto;
.news-tab{
padding-top:52rpx;
border-bottom: 1rpx solid #F0F0F2;
.tab-item{
.newsbox {
width: 702rpx;
margin: 0 auto;
.news-tab {
padding-top: 52rpx;
border-bottom: 1rpx solid #f0f0f2;
.tab-item {
margin-right: 35rpx;
padding-bottom: 13rpx;
font-size: 28rpx;
color:$uni-color666;
color: $uni-color666;
position: relative;
&.act{
color:$uni-color333;
&.act {
color: $uni-color333;
font-weight: 600;
&::after{
content:"";
&::after {
content: '';
position: absolute;
width: 53rpx;
height: 7rpx;
background: $uni-coloract;
border-radius: 4px;
bottom: 0rpx;
left:50%;
left: 50%;
transform: translateX(-26rpx);
}
}
}
}
.newscons{
.newsconitem{
.newscons {
.newsconitem {
display: block;
padding-top: 34rpx;
border-bottom: 1rpx solid #F0F0F2;
border-bottom: 1rpx solid #f0f0f2;
padding-bottom: 24rpx;
.ncleft{
.ncleft {
width: 506rpx;
.titnew{
.titnew {
font-size: 28rpx;
font-weight: 400;
height:80rpx;
color:$uni-color333;
height: 80rpx;
color: $uni-color333;
line-height: 40rpx;
}
.tittips{
.tittips {
margin-top: 12rpx;
height: 60rpx;
font-size: 22rpx;
font-weight: 400;
color:$uni-color999;
color: $uni-color999;
line-height: 30rpx;
}
}
image{
image {
width: 180rpx;
height: 110rpx;
border-radius: 10rpx;
}
.newitembottom{
.newitembottom {
margin-top: 18rpx;
.tagitem{
.tagitem {
height: 34rpx;
line-height: 30rpx;
padding:0 16rpx;
padding: 0 16rpx;
border-radius: 17rpx;
border: 1rpx solid #23A8F6;
color: #23A8F6;
border: 1rpx solid #23a8f6;
color: #23a8f6;
font-size: 22rpx;
margin-right: 14rpx;
}
.newtime{
height:30rpx;
.newtime {
height: 30rpx;
line-height: 30rpx;
color:$uni-color999;
color: $uni-color999;
font-size: 22rpx;
}
}
}
}
.newsbot{
.newsbot {
height: 81rpx;
line-height: 81rpx;
color:$uni-coloract;
color: $uni-coloract;
font-size: 24rpx;
text-align: center;
text{font-size: 28rpx;margin-left: 7rpx;}
text {
font-size: 28rpx;
margin-left: 7rpx;
}
}
}
.pagebot{
.pagebot {
height: 62rpx;
line-height: 62rpx;
background: #F5F5F7;
background: #f5f5f7;
font-size: 22rpx;
text-align: center;
color:#C6C7CC;
color: #c6c7cc;
}
::v-deep {
uni-swiper .uni-swiper-dot{
uni-swiper .uni-swiper-dot {
width: 10px;
height: 8px;
background: #FFFFFF!important;
background: #ffffff !important;
border-radius: 4px;
}
.uni-swiper-dot-active{
width:20px!important;
.uni-swiper-dot-active {
width: 20px !important;
}
}
pages/index/index.vue
......@@ -3,7 +3,7 @@
<drag-button-follow follow="left,right" className="drag-button" class="drag-button" :url="kfurl"></drag-button-follow>
<view class="header " :class="{ fixedtop: scrollTop > 45 }">
<view class="search-topb row bothSide ">
<image src="../../static/logosmall.png"></image>
<image src="../../static/logosmall.png" mode="aspectFill"></image>
<navigator class="searchinput row" url="/search">
<text class="icon iconfont icon-search seartext"></text>
<input />
......@@ -66,18 +66,18 @@
<view class="hztips">海外千万元物料 一站式现货采购</view>
</view>
</view>
<view class="brand-con row bothSide" v-show="brandact == 1">
<a :href="item.url" v-for="(item, index) in obj.h5_home_original_supply" :key="index"><image :src="item.images"></image></a>
<view class="brand-con" v-show="brandact == 1">
<a :href="item.url" v-for="(item, index) in obj.h5_home_original_supply" :key="index"><image :src="item.images" mode="aspectFill"></image></a>
</view>
<view class="brand-con row bothSide brand-conxh" v-show="brandact != 1">
<a :href="item.url" v-for="(item, index) in obj.h5_home_oversea_goods" :key="index"><image :src="item.images"></image></a>
<view class="brand-con brand-conxh" v-show="brandact != 1">
<a :href="item.url" v-for="(item, index) in obj.h5_home_oversea_goods" :key="index"><image :src="item.images" mode="aspectFill"></image></a>
</view>
</view>
<view class="goods-box">
<view class="titg">精选物料</view>
<scroll-view class="goods-con" scroll-x="true">
<a :href="'/#/item/' + item.goods_id" class="goods-item" v-for="(item, index) in obj.h5_home_choice_goods" :key="index">
<image :src="item.goods_images"></image>
<image :src="item.goods_images" mode="aspectFill"></image>
<view class="xhg elep">{{ item.goods_name }}</view>
<view class="ppg elep">
品牌:
......@@ -93,13 +93,13 @@
<view class="fwbox">
<view class="fwinfo">
<view class="tiiw">
<image src="https://img.ichunt.com/images/ichunt/202304/05/57ea7022c4120d275183e00bdf86e97e.png"></image>
<image src="https://img.ichunt.com/images/ichunt/202304/05/57ea7022c4120d275183e00bdf86e97e.png" mode="aspectFill"></image>
猎芯网的服务保障
</view>
<view class="finfocon">每一颗电了物料都将通过猎芯网严格的质量检测，我们将有效把控供应链源头质量，为客户稳定生产保驾护航。成为值得信赖的电子供应链技术与服务提供商。</view>
<view class="rzbox row bothSide">
<view class="rzitem" v-for="(item, index) in obj.h5_home_qualifications" :key="index" v-if="index < 3">
<image :src="item.images"></image>
<image :src="item.images" mode="aspectFill"></image>
<text>{{ item.title }}</text>
</view>
</view>
......@@ -108,7 +108,7 @@
<view class="videobox">
<view class="tiib">
{{ item.title }}
<image src="https://img.ichunt.com/images/ichunt/202304/05/870dc360521d97062018c93afb40130e.png"></image>
<image src="https://img.ichunt.com/images/ichunt/202304/05/870dc360521d97062018c93afb40130e.png" mode="aspectFill"></image>
</view>
</view>
<view class="videoval"><video object-fit="fill" :src="item.images"></video></view>
......@@ -125,7 +125,7 @@
<view class="titnew elep2">{{ item1.title }}</view>
<view class="tittips elep2">{{ item1.description }}</view>
</view>
<image :src="item1.litpic"></image>
<image :src="item1.litpic" mode="aspectFill"></image>
</view>
<view class="newitembottom row bothSide">
<view class="tagbox row">
......
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 sign in to comment