Skip to content

肖康 / H5_2.0

Go to a project
Commit 5febb16f by LJM
Options

cssMerge branch 'master' of http://git.ichunt.net/xiaokang/H5_2.0 

# Conflicts:
#	uni.scss
parents 8595c7fc 44b434ab
Inline Side-by-side
Showing with 160 additions and 137 deletions
assets/css/index/index.scss
......@@ -111,8 +111,9 @@
top:75rpx;
left:-150rpx;
z-index: 2;
navigator{
a{
height:73rpx;
display: block;
width: 152rpx;
border-bottom: 1rpx solid #484B59;
......@@ -146,7 +147,7 @@
overflow: hidden;
border-radius: 10rpx;
swiper{height:302rpx;}
navigator{
a{
display: block;
width:702rpx;
height:100%;
......@@ -165,11 +166,30 @@
.ggbox{
width:702rpx;
margin:0 auto;
height:81rpx;
height:42px;
border-bottom: 1px solid #F0F0F2;
line-height: 81rpx;
line-height: 42px;
color:$uni-color666;
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{
margin-right: 11rpx;
font-size: 32rpx;
......@@ -180,10 +200,11 @@
width:704rpx;
margin:0 auto;
margin-top: 27rpx;
navigator{
a{
display: block;
width:164rpx;
height:136rpx;
image{
display: block;
width:164rpx;
......@@ -248,11 +269,12 @@
border-radius: 0rpx 0rpx 10rpx 10rpx;
flex-wrap: wrap;
padding-left:24rpx;
navigator{
a{
width: 144rpx;
display: block;
height: 81rpx;
display: block;
margin-right: 26rpx;
margin-right: 28rpx;
margin-bottom: 16rpx;
image{
width: 144rpx;
......@@ -498,3 +520,5 @@
}
}
assets/css/mine/login.scss
......@@ -129,3 +129,10 @@
}
}
}
.mb24 {
margin-bottom: 24rpx;
}
.mb40 {
margin-bottom: 40rpx;
}
pages/index/index.vue
<template>
<view class="page indexPage">
<drag-button-follow follow="left,right" className="drag-button" class="drag-button"></drag-button-follow>
<drag-button-follow follow="left,right" className="drag-button" class="drag-button"></drag-button-follow>
<view class="header " :class="{'fixedtop':scrollTop>45}">
<view class="search-topb row bothSide ">
<image src="../../static/logosmall.png"></image>
......@@ -17,64 +17,49 @@
<text class="icon iconfont icon-candan"></text>
<text class="sj"></text>
<view class="cdcons">
<navigator url="#">关于我们</navigator>
<navigator url="#">国产替代</navigator>
<navigator url="#">下载中心</navigator>
<navigator url="#">供应商入驻</navigator>
<a :url="item.url" v-for="(item,index) in obj.h5_home_function_nav"
:key="index">{{item.ttile}}</a>
</view>
</view>
</view>
<view class="tipsad row avarage">
<view class="taditem">
<text class="icon iconfont icon-adindex1"></text>
<text>千万现货物料</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 class="taditem" @click="clickbug" v-for="(item,index) in obj.h5_home_concept_text" :key="index">
<text :class="'icon iconfont icon-adindex'+(index+1)"></text>
<text>{{item.title}}</text>
</view>
</view>
<view class="bannerbox">
<swiper class="swiper" circular :indicator-dots="autoplay" indicator-color="#fff" :autoplay="autoplay" >
<swiper-item v-for="(item, index) in bannerlist" :key="index">
<navigator :url="item.url"><image :src="item.src"></image></navigator>
<swiper class="swiper" circular :indicator-dots="autoplay" indicator-color="#fff" :autoplay="autoplay">
<swiper-item v-for="(item, index) in obj.rollbanner" :key="index">
<a :href="item.url">
<image :src="item.images"></image>
</a>
</swiper-item>
</swiper>
</view>
</view>
<view class="ggbox ">
<navigator url="#" class="row">
<text class="icon iconfont icon-tz"></text>
<view class="ggtext">猎芯与国产原厂美仁半导体达成线上合作 >> </view>
</navigator>
<view class="ggbox row verCenter">
<text class="icon iconfont icon-tz"></text>
<view class="ggcons">
<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>
<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="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>
<view class="hztips">原厂战略合作 官方技术支持</view>
</view>
......@@ -84,89 +69,89 @@
</view>
</view>
<view class="brand-con row bothSide" v-show='brandact==1'>
<navigator :url="item.url" v-for="(item,index) in brandlist" :key="index">
<image :src="item.src"></image>
</navigator>
<a :href="item.url" v-for="(item,index) in obj.h5_home_original_supply" :key="index">
<image :src="item.images"></image>
</a>
</view>
<view class="brand-con row bothSide brand-conxh" v-show='brandact!=1'>
<navigator :url="item.url" v-for="(item,index) in brandlist" :key="index">
<image :src="item.src"></image>
</navigator>
<a :href="item.url" v-for="(item,index) in obj.h5_home_oversea_goods" :key="index">
<image :src="item.images"></image>
</a>
</view>
</view>
<view class="goods-box">
<view class="titg">精选物料<text>简短的描述文字，简短的描述文字</text></view>
<scroll-view class="goods-con" scroll-x="true">
<navigator class="goods-item">
<image src="https://img.ichunt.com/images/ichunt/202304/05/f2f1154e6ecd64992d4bc742c8dd7fa6.png"></image>
<view class="xhg elep">SLPHPB35BSR1</view>
<view class="ppg elep">品牌:<text>TIKLJHJ</text></view>
<view class="jgg elep">价格:<text>￥38.5226</text></view>
<navigator :url="'/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>
<view class="xhg elep">{{item.goods_name}}</view>
<view class="ppg elep">品牌:<text>{{item.brand_name}}</text></view>
<view class="jgg elep">价格:<text>{{item.price}}</text></view>
</navigator>
</scroll-view>
</view>
<view class="fwbox">
<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>
<view class="rzbox row bothSide">
<view class="rzitem">
<image src="https://img.ichunt.com/images/ichunt/202304/05/a22fe1ea25ce6f30066bbb56915b24d3.png"></image>
<text>ERAI会员</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 class="rzitem" v-for="(item,index) in obj.h5_home_qualifications" :key="index" v-if="index<3">
<image :src="item.images"></image>
<text>{{item.title}}</text>
</view>
</view>
</view>
<view class="videobox">
<view class="tiib">现货即服务 企业化服务 <image src="https://img.ichunt.com/images/ichunt/202304/05/870dc360521d97062018c93afb40130e.png"></image></view>
</view>
<view class="videoval">
<video object-fit="fill" src="https://video.ichunt.com/video/mp4/daohang-30S-yasuo.mp4?v=20211207"></video>
<view v-for="(item,index) in obj.h5_home_slogan" :key="index">
<view class="videobox">
<view class="tiib">{{item.title}}
<image
src="https://img.ichunt.com/images/ichunt/202304/05/870dc360521d97062018c93afb40130e.png">
</image>
</view>
</view>
<view class="videoval">
<video object-fit="fill" :src="item.images"></video>
</view>
</view>
</view>
<view class="newsbox">
<view class="news-tab row">
<view class="tab-item act">行业热点</view>
<view class="tab-item">猎芯公告</view>
<view class="tab-item">猎芯活动</view>
<view class="tab-item">知识分享</view>
<view class="tab-item " @click="newtab(index)" :class="{act:(index==newsindex)}"
v-for="(item,index) in obj.h5_home_article" :key="index">{{item.title}}</view>
</view>
<view class="newscons">
<navigator class="newsconitem row" url="#">
<view class="newscons" v-for="(item,index) in obj.h5_home_article" :key="index" v-show="index==newsindex">
<a class="newsconitem row" :href="item1.url" v-for="(item1,index1) in item.article_list" :key="index1">
<view class="row bothSide">
<view class="ncleft">
<view class="titnew elep2">传感人的年度盛宴——深圳国际传感器展暨高峰论坛邀您共襄盛举</view>
<view class="tittips elep2">随着5G技术以及人工智能、物联网及其他智慧领域等高新技术产业的迅速崛起和高速发展，人类社...</view>
<view class="titnew elep2">{{item1.title}}</view>
<view class="tittips elep2">{{item1.description}}</view>
</view>
<image src="https://img.ichunt.com/images/cms/202303/29/ad25b7e925dd7bc4260eded534d7f960.jpg"></image>
<image :src="item1.litpic"></image>
</view>
<view class="newitembottom row bothSide">
<view class="tagbox row">
<view class="tagitem">传感器</view>
<view class="tagitem">传感器</view>
<view class="tagitem" v-for="(item2,index2) in item1.tag" :key="index2">{{item2.tag}}</view>
</view>
<view class="newtime">2023-03-16 17:59:50</view>
<view class="newtime">{{item1.publish_time}}</view>
</view>
</navigator>
</a>
</view>
<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 class="pagebot">—— 已经到底了 ——</view>
<bottomNavFixed actval="1"/>
<bottomNavFixed actval="1" />
</view>
</template>
<script>
......@@ -177,58 +162,69 @@
export default {
data() {
return {
autoplay:true,
scrollTop:0,
bannerlist:[
{
src:"https://img.ichunt.com/images/cms/202303/29/ad25b7e925dd7bc4260eded534d7f960.jpg",
url:"#"
},
{
src:"https://img.ichunt.com/images/cms/202211/21/881439d0c3324c30564c018f6d423fdc.jpg",
url:"#"
},
{
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
autoplay: true,
scrollTop: 0,
bannerlist: [],
obj: {},
h5_home_concept_text: [],
h5_home_function_nav: [],
h5_home_original_supply: [],
brandact: 1,
newsindex: 0,
translateY: 0,
intervalHandler: null
};
},
onShow() {
this.getData();
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
destroyed() {
// 在组件销毁之前，清除 setInterval
clearInterval(this.intervalHandler)
},
methods: {
tabchange(guid){
this.brandact=guid;
moveUp() {
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() {
},
getData() {
this.request(Ichunt_Api+"/api/common/data", 'GET', {},).then(res => {
if (res.code === 0) {
} else if (res.code === 101) {
}
this.request(Ichunt_Api + "/api/index/index", 'GET', {}, ).then(res => {
if (res.err_code === 0) {
console.log(res.data)
this.obj = res.data;
if(this.obj.h5_home_notice.length<=1){
return
}
this.intervalHandler = setInterval(() => {
this.moveUp()
}, 5000)
}
});
}
},
components: {
bottomNavFixed
}
};
</script>
......
uni.scss
......@@ -12,12 +12,6 @@ $uni-sz12: 12rpx;
$uni-sz14: 14rpx;
$uni-fz16: 16rpx;
html,
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
view,
text,
input,
......@@ -26,6 +20,9 @@ navigator {
box-sizing: border-box;
font-family: PingFangSC-Semibold, PingFang SC;
}
a {
text-decoration: none;
}
.navigator-hover {
background: none;
opacity: 1;
......@@ -86,7 +83,6 @@ image {
.mb24 {
margin-bottom: 24rpx;
}
.mb40 {
margin-bottom: 40rpx;
}
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