Skip to content

肖康 / H5_2.0

Go to a project
Commit 44b434ab by 肖康
Options

首页修改

parent 6f3d060a
Inline Side-by-side
Showing with 139 additions and 118 deletions
assets/css/index/index.scss
...@@ -111,8 +111,9 @@ ...@@ -111,8 +111,9 @@
top:75rpx; top:75rpx;
left:-150rpx; left:-150rpx;
z-index: 2; z-index: 2;
navigator{ a{
height:73rpx; height:73rpx;
display: block; display: block;
width: 152rpx; width: 152rpx;
border-bottom: 1rpx solid #484B59; border-bottom: 1rpx solid #484B59;
...@@ -146,7 +147,7 @@ ...@@ -146,7 +147,7 @@
overflow: hidden; overflow: hidden;
border-radius: 10rpx; border-radius: 10rpx;
swiper{height:302rpx;} swiper{height:302rpx;}
navigator{ a{
display: block; display: block;
width:702rpx; width:702rpx;
height:100%; height:100%;
...@@ -165,11 +166,30 @@ ...@@ -165,11 +166,30 @@
.ggbox{ .ggbox{
width:702rpx; width:702rpx;
margin:0 auto; margin:0 auto;
height:81rpx; height:42px;
border-bottom: 1px solid #F0F0F2; border-bottom: 1px solid #F0F0F2;
line-height: 81rpx; line-height: 42px;
color:$uni-color666; color:$uni-color666;
font-size: 24rpx; font-size: 24rpx;
box-sizing: border-box;
.ggcons{
position: relative;
overflow-y: hidden;
width:676rpx;
height:16px;
box-sizing: border-box;
.ggsec{
position: absolute;
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;}
}
}
}
.icon{ .icon{
margin-right: 11rpx; margin-right: 11rpx;
font-size: 32rpx; font-size: 32rpx;
...@@ -180,10 +200,11 @@ ...@@ -180,10 +200,11 @@
width:704rpx; width:704rpx;
margin:0 auto; margin:0 auto;
margin-top: 27rpx; margin-top: 27rpx;
navigator{ a{
display: block; display: block;
width:164rpx; width:164rpx;
height:136rpx; height:136rpx;
image{ image{
display: block; display: block;
width:164rpx; width:164rpx;
...@@ -248,11 +269,12 @@ ...@@ -248,11 +269,12 @@
border-radius: 0rpx 0rpx 10rpx 10rpx; border-radius: 0rpx 0rpx 10rpx 10rpx;
flex-wrap: wrap; flex-wrap: wrap;
padding-left:24rpx; padding-left:24rpx;
navigator{ a{
width: 144rpx; width: 144rpx;
display: block;
height: 81rpx; height: 81rpx;
display: block; display: block;
margin-right: 26rpx; margin-right: 28rpx;
margin-bottom: 16rpx; margin-bottom: 16rpx;
image{ image{
width: 144rpx; width: 144rpx;
...@@ -498,3 +520,5 @@ ...@@ -498,3 +520,5 @@
} }
} }
pages/index/index.vue
...@@ -17,64 +17,49 @@ ...@@ -17,64 +17,49 @@
<text class="icon iconfont icon-candan"></text> <text class="icon iconfont icon-candan"></text>
<text class="sj"></text> <text class="sj"></text>
<view class="cdcons"> <view class="cdcons">
<navigator url="#">关于我们</navigator> <a :url="item.url" v-for="(item,index) in obj.h5_home_function_nav"
<navigator url="#">国产替代</navigator> :key="index">{{item.ttile}}</a>
<navigator url="#">下载中心</navigator>
<navigator url="#">供应商入驻</navigator>
</view> </view>
</view> </view>
</view> </view>
<view class="tipsad row avarage"> <view class="tipsad row avarage">
<view class="taditem"> <view class="taditem" @click="clickbug" v-for="(item,index) in obj.h5_home_concept_text" :key="index">
<text class="icon iconfont icon-adindex1"></text> <text :class="'icon iconfont icon-adindex'+(index+1)"></text>
<text>千万现货物料</text> <text>{{item.title}}</text>
</view>
<view class="taditem">
<text class="icon iconfont icon-adindex2"></text>
<text>渠道授权正品</text>
</view>
<view class="taditem">
<text class="icon iconfont icon-adindex3"></text>
<text>数智化企业服务</text>
</view> </view>
</view> </view>
<view class="bannerbox"> <view class="bannerbox">
<swiper class="swiper" circular :indicator-dots="autoplay" indicator-color="#fff" :autoplay="autoplay" > <swiper class="swiper" circular :indicator-dots="autoplay" indicator-color="#fff" :autoplay="autoplay">
<swiper-item v-for="(item, index) in bannerlist" :key="index"> <swiper-item v-for="(item, index) in obj.rollbanner" :key="index">
<navigator :url="item.url"><image :src="item.src"></image></navigator> <a :href="item.url">
<image :src="item.images"></image>
</a>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
</view> </view>
<view class="ggbox "> <view class="ggbox row verCenter">
<navigator url="#" class="row">
<text class="icon iconfont icon-tz"></text> <text class="icon iconfont icon-tz"></text>
<view class="ggtext">猎芯与国产原厂美仁半导体达成线上合作 >> </view> <view class="ggcons">
</navigator> <view class="ggsec" ref="boxcpr">
<a :href="item.url" class="row" v-for="(item,index) in obj.h5_home_notice" :key="index">
<view class="ggtext row"><text class="elep titletext">{{item.title}}</text> <text>>></text>
</view>
</a>
</view>
</view> </view>
<view class="szbox row avarage">
<navigator url="#">
<image src="https://img.ichunt.com/images/ichunt/202304/05/f2f1154e6ecd64992d4bc742c8dd7fa6.png"></image>
<view class="sitips">数字化选型</view>
</navigator>
<navigator url="#">
<image src="https://img.ichunt.com/images/ichunt/202304/05/f2f1154e6ecd64992d4bc742c8dd7fa6.png"></image>
<view class="sitips">数字化选型</view>
</navigator>
<navigator url="#">
<image src="https://img.ichunt.com/images/ichunt/202304/05/f2f1154e6ecd64992d4bc742c8dd7fa6.png"></image>
<view class="sitips">数字化选型</view>
</navigator>
<navigator url="#">
<image src="https://img.ichunt.com/images/ichunt/202304/05/f2f1154e6ecd64992d4bc742c8dd7fa6.png"></image>
<view class="sitips">数字化选型</view>
</navigator>
</view> </view>
<view class="szbox row avarage">
<a :href="item.url" v-for="(item,index) in obj.h5_home_function_nav" :key="index">
<image :src="item.images"></image>
<view class="sitips">{{item.title||"默认文案"}}</view>
</a>
</view>
<view class="brandbox"> <view class="brandbox">
<view class="brand-tab row bothSide"> <view class="brand-tab row bothSide">
<view :class = '{"act":brandact==1}' class="tabitem" @click="tabchange(1)"> <view :class='{"act":brandact==1}' class="tabitem" @click="tabchange(1)">
<text>原厂</text><text class="hztext">直供</text> <text>原厂</text><text class="hztext">直供</text>
<view class="hztips">原厂战略合作 官方技术支持</view> <view class="hztips">原厂战略合作 官方技术支持</view>
</view> </view>
...@@ -84,89 +69,89 @@ ...@@ -84,89 +69,89 @@
</view> </view>
</view> </view>
<view class="brand-con row bothSide" v-show='brandact==1'> <view class="brand-con row bothSide" v-show='brandact==1'>
<navigator :url="item.url" v-for="(item,index) in brandlist" :key="index"> <a :href="item.url" v-for="(item,index) in obj.h5_home_original_supply" :key="index">
<image :src="item.src"></image> <image :src="item.images"></image>
</navigator> </a>
</view> </view>
<view class="brand-con row bothSide brand-conxh" v-show='brandact!=1'> <view class="brand-con row bothSide brand-conxh" v-show='brandact!=1'>
<navigator :url="item.url" v-for="(item,index) in brandlist" :key="index"> <a :href="item.url" v-for="(item,index) in obj.h5_home_oversea_goods" :key="index">
<image :src="item.src"></image> <image :src="item.images"></image>
</navigator> </a>
</view> </view>
</view> </view>
<view class="goods-box"> <view class="goods-box">
<view class="titg">精选物料<text>简短的描述文字，简短的描述文字</text></view> <view class="titg">精选物料<text>简短的描述文字，简短的描述文字</text></view>
<scroll-view class="goods-con" scroll-x="true"> <scroll-view class="goods-con" scroll-x="true">
<navigator class="goods-item"> <navigator :url="'/item/'+item.goods_id" class="goods-item"
<image src="https://img.ichunt.com/images/ichunt/202304/05/f2f1154e6ecd64992d4bc742c8dd7fa6.png"></image> v-for="(item,index) in obj.h5_home_choice_goods" :key="index">
<view class="xhg elep">SLPHPB35BSR1</view> <image :src="item.goods_images"></image>
<view class="ppg elep">品牌:<text>TIKLJHJ</text></view> <view class="xhg elep">{{item.goods_name}}</view>
<view class="jgg elep">价格:<text>￥38.5226</text></view> <view class="ppg elep">品牌:<text>{{item.brand_name}}</text></view>
<view class="jgg elep">价格:<text>{{item.price}}</text></view>
</navigator> </navigator>
</scroll-view> </scroll-view>
</view> </view>
<view class="fwbox"> <view class="fwbox">
<view class="fwinfo"> <view class="fwinfo">
<view class="tiiw"><image src="https://img.ichunt.com/images/ichunt/202304/05/57ea7022c4120d275183e00bdf86e97e.png"></image>猎芯网的服务保障</view> <view class="tiiw">
<image src="https://img.ichunt.com/images/ichunt/202304/05/57ea7022c4120d275183e00bdf86e97e.png">
</image>猎芯网的服务保障
</view>
<view class="finfocon"> <view class="finfocon">
每一颗电了物料都将通过猎芯网严格的质量检测，我们将有效把控供应链源头质量，为客户稳定生产保驾护航。成为值得信赖的电子供应链技术与服务提供商。 每一颗电了物料都将通过猎芯网严格的质量检测，我们将有效把控供应链源头质量，为客户稳定生产保驾护航。成为值得信赖的电子供应链技术与服务提供商。
</view> </view>
<view class="rzbox row bothSide"> <view class="rzbox row bothSide">
<view class="rzitem"> <view class="rzitem" v-for="(item,index) in obj.h5_home_qualifications" :key="index" v-if="index<3">
<image src="https://img.ichunt.com/images/ichunt/202304/05/a22fe1ea25ce6f30066bbb56915b24d3.png"></image> <image :src="item.images"></image>
<text>ERAI会员</text> <text>{{item.title}}</text>
</view>
<view class="rzitem">
<image src="https://img.ichunt.com/images/ichunt/202304/05/f02135cddde6ff6d6bef2cb9be7b3285.png"></image>
<text>邓白氏认证</text>
</view>
<view class="rzitem">
<image src="https://img.ichunt.com/images/ichunt/202304/05/e9909796798c4f49e636d697e866dea6.png"></image>
<text>ISO 9001:2015</text>
</view> </view>
</view> </view>
</view> </view>
<view v-for="(item,index) in obj.h5_home_slogan" :key="index">
<view class="videobox"> <view class="videobox">
<view class="tiib">现货即服务 企业化服务 <image src="https://img.ichunt.com/images/ichunt/202304/05/870dc360521d97062018c93afb40130e.png"></image></view> <view class="tiib">{{item.title}}
<image
src="https://img.ichunt.com/images/ichunt/202304/05/870dc360521d97062018c93afb40130e.png">
</image>
</view>
</view> </view>
<view class="videoval"> <view class="videoval">
<video object-fit="fill" src="https://video.ichunt.com/video/mp4/daohang-30S-yasuo.mp4?v=20211207"></video> <video object-fit="fill" :src="item.images"></video>
</view> </view>
</view> </view>
</view>
<view class="newsbox"> <view class="newsbox">
<view class="news-tab row"> <view class="news-tab row">
<view class="tab-item act">行业热点</view> <view class="tab-item " @click="newtab(index)" :class="{act:(index==newsindex)}"
<view class="tab-item">猎芯公告</view> v-for="(item,index) in obj.h5_home_article" :key="index">{{item.title}}</view>
<view class="tab-item">猎芯活动</view>
<view class="tab-item">知识分享</view>
</view> </view>
<view class="newscons"> <view class="newscons" v-for="(item,index) in obj.h5_home_article" :key="index" v-show="index==newsindex">
<navigator class="newsconitem row" url="#"> <a class="newsconitem row" :href="item1.url" v-for="(item1,index1) in item.article_list" :key="index1">
<view class="row bothSide"> <view class="row bothSide">
<view class="ncleft"> <view class="ncleft">
<view class="titnew elep2">传感人的年度盛宴——深圳国际传感器展暨高峰论坛邀您共襄盛举</view> <view class="titnew elep2">{{item1.title}}</view>
<view class="tittips elep2">随着5G技术以及人工智能、物联网及其他智慧领域等高新技术产业的迅速崛起和高速发展，人类社...</view> <view class="tittips elep2">{{item1.description}}</view>
</view> </view>
<image src="https://img.ichunt.com/images/cms/202303/29/ad25b7e925dd7bc4260eded534d7f960.jpg"></image> <image :src="item1.litpic"></image>
</view> </view>
<view class="newitembottom row bothSide"> <view class="newitembottom row bothSide">
<view class="tagbox row"> <view class="tagbox row">
<view class="tagitem">传感器</view> <view class="tagitem" v-for="(item2,index2) in item1.tag" :key="index2">{{item2.tag}}</view>
<view class="tagitem">传感器</view>
</view> </view>
<view class="newtime">2023-03-16 17:59:50</view> <view class="newtime">{{item1.publish_time}}</view>
</view> </view>
</navigator> </a>
</view> </view>
<view class="newsbot"> <view class="newsbot">
<navigator url="#">浏览更多资讯<text class="icon iconfont icon-jt"></text></navigator> <navigator url="/news">浏览更多资讯<text class="icon iconfont icon-jt"></text></navigator>
</view> </view>
</view> </view>
<view class="pagebot">—— 已经到底了 ——</view> <view class="pagebot">—— 已经到底了 ——</view>
<bottomNavFixed actval="1"/> <bottomNavFixed actval="1" />
</view> </view>
</template> </template>
<script> <script>
...@@ -177,29 +162,17 @@ ...@@ -177,29 +162,17 @@
export default { export default {
data() { data() {
return { return {
autoplay:true, autoplay: true,
scrollTop:0, scrollTop: 0,
bannerlist:[ bannerlist: [],
{ obj: {},
src:"https://img.ichunt.com/images/cms/202303/29/ad25b7e925dd7bc4260eded534d7f960.jpg", h5_home_concept_text: [],
url:"#" h5_home_function_nav: [],
}, h5_home_original_supply: [],
{ brandact: 1,
src:"https://img.ichunt.com/images/cms/202211/21/881439d0c3324c30564c018f6d423fdc.jpg", newsindex: 0,
url:"#" translateY: 0,
}, intervalHandler: null
{
src:"https://img.ichunt.com/images/cms/202211/21/881439d0c3324c30564c018f6d423fdc.jpg",
url:"#"
}
],
brandlist:[
{
src:"https://img.ichunt.com/images/cms/202303/29/ad25b7e925dd7bc4260eded534d7f960.jpg",
url:"#"
},
],
brandact:1
}; };
}, },
...@@ -210,25 +183,48 @@ ...@@ -210,25 +183,48 @@
onPageScroll(e) { onPageScroll(e) {
this.scrollTop = e.scrollTop; this.scrollTop = e.scrollTop;
}, },
destroyed() {
// 在组件销毁之前，清除 setInterval
clearInterval(this.intervalHandler)
},
methods: { methods: {
tabchange(guid){ moveUp() {
this.brandact=guid; const moveDistance=16;
let height_=this.obj.h5_home_notice.length*16;
this.translateY = this.translateY - moveDistance;
if(Math.abs(this.translateY)>=height_){this.translateY=0}
this.$refs.boxcpr.$el.style.transform = `translateY(${this.translateY}px)`
},
newtab(index) {
this.newsindex = index
},
clickbug(e) {
return false
},
tabchange(guid) {
this.brandact = guid;
}, },
allowChange() { allowChange() {
}, },
getData() { getData() {
this.request(Ichunt_Api+"/api/common/data", 'GET', {},).then(res => { this.request(Ichunt_Api + "/api/index/index", 'GET', {}, ).then(res => {
if (res.code === 0) { if (res.err_code === 0) {
console.log(res.data)
} else if (res.code === 101) { this.obj = res.data;
if(this.obj.h5_home_notice.length<=1){
return
}
this.intervalHandler = setInterval(() => {
this.moveUp()
}, 5000)
} }
}); });
} }
}, },
components: { components: {
bottomNavFixed bottomNavFixed
} }
}; };
</script> </script>
......
uni.scss
...@@ -22,6 +22,7 @@ input,navigator { ...@@ -22,6 +22,7 @@ input,navigator {
box-sizing: border-box; box-sizing: border-box;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
} }
a{text-decoration: none;}
.navigator-hover{ .navigator-hover{
background:none; background:none;
opacity: 1; opacity: 1;
......
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