本文已参与「新人创作礼」活动，一起开启掘金创作之路。
项目，直接上代码。
能力一般，水平有限，代码极其的冗余，见谅。
复制粘贴直接使用，uview-ui 的组件，使用前先引入，链接我的文章关于uview引入讲解
核心思想：
uni.createSelectorQuery()这个方法获取到页面元素到手机屏幕的距离，不要搞混了，再说三遍，获取到元素距离手机屏幕顶部的高度，获取到元素距离手机屏幕顶部的高度，获取到元素距离手机屏幕顶部的高度。
我们需要获取到元素到整个长页面的顶部距离，这个方法不能直接使用，因为如果滑动一段距离之后，再去刷新页面，那么元素会停留在当前位置，这时候计算出来的高度已经不正确了。
但是可以从另一个方面下手，当页面onload时，这个时候，所有元素都是最开始状态，位置均正确，这时获取到想要跳转元素距离手机顶部的高度，存到变量里，然后就算手机滚动后也不影响，
再去用uni.pageScrollTo跳转这个变量，也就是元素距离顶部的距离，实现锚点跳转
但是如何经常获取到最开始的距离，可以使用onhide，当页面退出或者去下一个页面时候，隐藏页面时候，让uni.pageScrollTo去到最顶部， 再次记录所有元素距离顶部最开始状态，这样就解决了再进入页面时，元素位置不正确导致跳转距离偏差问题。
这里面还有自己写的一个状态栏随着滚动淡隐淡出、屏幕滑动一定距离元素隐藏和出现、随着滑动的距离改变其顶部选项卡默认的字体颜色。
HTML：
<template>
<view>
<view class="head" :style="bgcolor">
<view class="back">
<view class="left1"><image src="/static/back_green.png" mode=""></image></view>
</view>
<table></table>
<view class="title1">
<view class="" :style="color1"><text @click="sp" :style="fw1">商品</text></view>
<view class="" :style="color2" value="1"><text @click="xq" :style="fw2">详情</text></view>
<view class="" :style="color3" value="2"><text @click="tj" :style="fw3">推荐</text></view>
</view>
</view>
<view class="fanhui" :style="{ display: flag === false ? 'none' : 'block' }"><image src="/static/back_bai.png" mode=""></image></view>
<view class="">
<view class="swiper"><u-swiper :list="list" mode="none" height="760"></u-swiper></view>
<view class="" style="height: 110rpx;width: 100%;padding: 20rpx;">
<text style="font-weight: bold;">青年鸡厂家，青年鸡厂家，青年鸡厂家，青年鸡厂家，青年鸡厂家，青年鸡厂家，</text>
</view>
<view class="" style="height: 80rpx;width: 100%;padding-left: 20rpx;">
<text style="font-size: 24rpx;color: #646464;">诚信赢天下，诚信赢天下，诚信赢天下，诚信赢天下，诚信赢天下，诚信赢天下，</text>
</view>
<view class="xian"></view>
<view class="zuobiao">
<image src="../../static/zuobiao.svg" mode=""></image>
<text style="font-size: 24rpx;color: #969696;position: absolute;left: 70rpx; top: 20rpx;">山东省枣庄市 | 距离137公里</text>
</view>
<view class="kanguo">
<image src="../../static/eye2.svg" mode=""></image>
<text style="font-size: 24rpx;color: #969696;position: absolute;left: 70rpx; top: 20rpx;">17万人看过</text>
</view>
<view class="bg"></view>
<view class="guige">
<view class="title2" style="display: flex;justify-content: space-between;font-weight: bold;color: #010101;font-size: 28rpx;">
<text>规格</text>
<text>起批量</text>
<text>价格</text>
</view>
<view>
<view class="first" style="margin-top: 20rpx;">
<view class="first1">青年鸡厂家， 青年鸡厂家，</view>
<view class="first2">20只起批</view>
<view class="first3"><text style="float: right;padding:20rpx 26rpx 0 0;color: #00CE88;font-weight: bold; ">￥53/只</text></view>
</view>
<view class="two">
<view class="two1">青年鸡厂家， 青年鸡厂家，</view>
<view class="two2">20只起批</view>
<view class="two3"><text style="float: right;padding:20rpx 26rpx 0 0;color: #00CE88;font-weight: bold; ">￥53/只</text></view>
</view>
<view class="three">
<view class="three1">青年鸡厂家， 青年鸡厂家，</view>
<view class="three2">20只起批</view>
<view class="three3"><text style="float: right;padding:20rpx 26rpx 0 0;color: #00CE88;font-weight: bold; ">￥53/只</text></view>
</view>
</view>
</view>
<view class="bg"></view>
<view class="shandong">
<view class="touxiang">
<image src="../../static/touxiang.png" style="width: 100%;height: 100%;" mode=""></image>
</view>
<text style="position: absolute;top: 40rpx;left: 160rpx;font-weight: bold;font-size: 28rpx;color: #646464;">山东养殖寄工厂</text>
<text style="font-size: 24rpx;color: #969696;position: absolute;bottom: 30rpx;">诚信经营。诚信经营。诚信经营。诚信经营。诚信经营。诚信经营。</text>
<view
@click="todpsy"
class="ckmp"
style="position: absolute;right: 30rpx;top: 40rpx;width: 144rpx;height: 50rpx;background-color: #fff;border-radius: 40rpx;border: 2rpx solid #00ce88;text-align: center;line-height: 44rpx;font-size: 24rpx;color: #00ce88;"
>
<text>查看名片</text>
</view>
<view class="huangzuan">
<image style="width: 48rpx;height: 48rpx;position: absolute;left: -22rpx;top: -10rpx;" src="../../static/huangzuan.png" mode=""></image>
<text style="color: #FFFFFF;">1年</text>
</view>
<view class="bao"><image style="width: 100%;height: 100%;" src="../../static/bao.svg" mode=""></image></view>
<view class="huangguan"><image style="width: 100%;height: 100%;" src="../../static/huangguan.png" mode=""></image></view>
</view>
<view class="bg"></view>
<view class="tuijian">
<view class="tuijian1">
<view class="" style="height: 50rpx;width: 50%;"><text style="font-weight: bold;font-size: 30rpx;">店铺商品推荐（9）</text></view>
<view class="">
<text style="color: #00CE88;">查看全部</text>
<image src="../../static/back_green.svg" mode=""></image>
</view>
</view>
<view class="xian"></view>
<view class="hongmao">
<view class="hongmao1">
<view class="" style="width:220rpx;height: 200rpx;background-color: #2979FF;border-radius: 12rpx;">
<image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image>
</view>
<view class="" style="font-size: 24rpx;color: #323232; margin-top: 16rpx;"><text>红毛淘汰鸡八九成毛</text></view>
<view class="" style="margin-top: 20rpx;">
<text style="font-size: 28rpx;color: #00CE88;">￥43/只</text>
<text style="font-size: 20rpx;color: #969696;">1730人看过</text>
</view>
</view>
<view class="hongmao2">
<view class="" style="width:220rpx;height: 200rpx;background-color: #2979FF;border-radius: 12rpx;">
<image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image>
</view>
<view class="" style="font-size: 24rpx;color: #323232; margin-top: 16rpx;"><text>红毛淘汰鸡八九成毛</text></view>
<view class="" style="margin-top: 20rpx;">
<text style="font-size: 28rpx;color: #00CE88;">￥43/只</text>
<text style="font-size: 20rpx;color: #969696;">1730人看过</text>
</view>
</view>
<view class="hongmao3">
<view class="" style="width:220rpx;height: 200rpx;background-color: #2979FF;border-radius: 12rpx;">
<image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image>
</view>
<view class="" style="font-size: 24rpx;color: #323232; margin-top: 16rpx;"><text>红毛淘汰鸡八九成毛</text></view>
<view class="" style="margin-top: 20rpx;">
<text style="font-size: 28rpx;color: #00CE88;">￥43/只</text>
<text style="font-size: 20rpx;color: #969696;">1730人看过</text>
</view>
</view>
</view>
</view>
<view class="bg"></view>
<view class="huopin">
<view class=""><text style="font-size: 32rpx;color: #141414;font-weight: bold;">货品详情</text></view>
<view class="xian"></view>
<view class="" style="margin-top: 20rpx;">
<text style="font-size: 28rpx;color: #323232;">
专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。专业实体二十年。
</text>
</view>
</view>
<view class="img2" style="width: 100%;height: 760rpx;background-color: #007AFF;">
<image src="../../static/ji.png" style="width: 100%;height: 100%;" mode=""></image>
</view>
<view class="img2" style="width: 100%;height: 760rpx;background-color: #007AFF;margin-top: 16rpx;">
<image src="../../static/ji.png" style="width: 100%;height: 100%;" mode=""></image>
</view>
<view
class="fabu"
style="width: 100%;height: 84rpx;
font-size: 24rpx;color: #646464;"
>
<view class="" style="width: 110rpx;height: 100%;padding-top: 20rpx;text-align: center;float: left;margin-left: 30rpx;"><text>发布时间:</text></view>
<view class="" style="width: 110rpx;height: 100%;padding-top: 20rpx;text-align: center;float: left;"><text>05月15日</text></view>
<view class="" style="width: 80rpx;height: 100%;padding-top: 20rpx;text-align: center;float: left;"><text>15:08</text></view>
</view>
<view
class="heng"
style="position: relative; width: 100%;
height: 70rpx;
background-color: #F2F2F2;"
>
<view class="" style="width: 160rpx;height: 1rpx;color: #e0e0e0;position: absolute;left: 140rpx;top: 16rpx;">—————</view>
<view class="weinin"><text>为您推荐</text></view>
<view class="" style="width: 160rpx;height: 1rpx;color: #e0e0e0;position: absolute;right: 140rpx;top: 16rpx;">—————</view>
</view>
<view class="end">
<view class="green" style="width: 8rpx;height: 34rpx;background-color: #00CE88;position: absolute;top: 24rpx;left: 40rpx;"></view>
<view class=""><text style="font-size: 28rpx;font-weight: bold;color: #141414;position: absolute;left: 70rpx;top: 20rpx;">为您推荐</text></view>
<view class="youxuan" style="position: absolute;top: 60rpx;width: 100%;">
<view class="youxuan1" style="width: 46%;margin:10rpx 10rpx 10rpx 2%;float: left;border-radius: 14rpx;box-shadow:2px 4px 2px #eee;">
<view class="" style="width: 100%;height: 350rpx;border-top-right-radius: 14rpx;border-top-left-radius: 14rpx;"><image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image></view>
<view class="" style="width: 90%;margin-top: 10rpx;margin-bottom: 10rpx;margin-left: 20rpx;">
<text style="font-size: 28rpx;font-weight: bold;">鸡饲料批发城</text>
</view>
<view class="" style="width: 100%;margin-bottom: 20rpx;margin-left: 20rpx;">
<text style="color: #00CE88;">￥</text>
<text style="color: #00CE88;font-size: 32rpx;font-weight: bold;margin-bottom: ;">39.00/斤</text>
<text style="color: #969696;font-size: 20rpx;">山东潍坊</text>
</view>
</view>
<view class="youxuan1" style="width: 46%;margin:10rpx 10rpx 10rpx 2%;float: left;border: 1rpx solid #ddd;border-radius: 14rpx;box-shadow:0px 2px 0px #eee;">
<view class="" style="width: 100%;height: 350rpx;border-top-right-radius: 14rpx;border-top-left-radius: 14rpx;"><image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image></view>
<view class="" style="width: 90%;margin-top: 10rpx;margin-bottom: 10rpx;margin-left: 20rpx;">
<text style="font-size: 28rpx;font-weight: bold;">鸡饲料批发城,鸡饲料批发城</text>
</view>
<view class="" style="width: 100%;margin-bottom: 20rpx;margin-left: 20rpx;">
<text style="color: #00CE88;">￥</text>
<text style="color: #00CE88;font-size: 32rpx;font-weight: bold;margin-bottom: ;">39.00/斤</text>
<text style="color: #969696;font-size: 20rpx;">山东潍坊</text>
</view>
</view>
<view class="youxuan1" style="width: 46%;margin:10rpx 10rpx 10rpx 2%;float: left;border: 1rpx solid #ddd;border-radius: 14rpx;box-shadow:0px 2px 0px #eee;">
<view class="" style="width: 100%;height: 350rpx;border-top-right-radius: 14rpx;border-top-left-radius: 14rpx;"><image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image></view>
<view class="" style="width: 90%;margin-top: 10rpx;margin-bottom: 10rpx;margin-left: 20rpx;">
<text style="font-size: 28rpx;font-weight: bold;">鸡饲料批发城</text>
</view>
<view class="" style="width: 100%;margin-bottom: 20rpx;margin-left: 20rpx;">
<text style="color: #00CE88;">￥</text>
<text style="color: #00CE88;font-size: 32rpx;font-weight: bold;margin-bottom: ;">39.00/斤</text>
<text style="color: #969696;font-size: 20rpx;">山东潍坊</text>
</view>
</view>
<view class="youxuan1" style="width: 46%;margin:10rpx 10rpx 10rpx 2%;float: left;border: 1rpx solid #ddd;border-radius: 14rpx;box-shadow:0px 2px 0px #eee;">
<view class="" style="width: 100%;height: 350rpx;border-top-right-radius: 14rpx;border-top-left-radius: 14rpx;"><image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image></view>
<view class="" style="width: 90%;margin-top: 10rpx;margin-bottom: 10rpx;margin-left: 20rpx;">
<text style="font-size: 28rpx;font-weight: bold;">鸡饲料批发城,鸡饲料批发城</text>
</view>
<view class="" style="width: 100%;margin-bottom: 20rpx;margin-left: 20rpx;">
<text style="color: #00CE88;">￥</text>
<text style="color: #00CE88;font-size: 32rpx;font-weight: bold;margin-bottom: ;">39.00/斤</text>
<text style="color: #969696;font-size: 20rpx;">山东潍坊</text>
</view>
</view>
<view class="youxuan1" style="width: 46%;margin:10rpx 10rpx 10rpx 2%;float: left;border: 1rpx solid #ddd;border-radius: 14rpx;box-shadow:0px 2px 0px #eee;">
<view class="" style="width: 100%;height: 350rpx;border-top-right-radius: 14rpx;border-top-left-radius: 14rpx;"><image src="../../static/spji.png" style="width: 100%;height: 100%;" mode=""></image></view>
<view class="" style="width: 90%;margin-top: 10rpx;margin-bottom: 10rpx;margin-left: 20rpx;">
<text style="font-size: 28rpx;font-weight: bold;">鸡饲料批发城</text>
</view>
<view class="" style="width: 100%;margin-bottom: 20rpx;margin-left: 20rpx;">
<text style="color: #00CE88;">￥</text>
<text style="color: #00CE88;font-size: 32rpx;font-weight: bold;margin-bottom: ;">39.00/斤</text>
<text style="color: #969696;font-size: 20rpx;">山东潍坊</text>
</view>
</view>
</view>
</view>
<view class="lxsj" style="width: 100%;height: 100rpx;position: fixed;bottom: 0;">
<view class="">
<view class="mp" @click="todpsy">
<image src="../../static/mp.png" mode=""></image>
<view class=""><text style="color: #969696;font-size: 24rpx;position: absolute;top: 50rpx;left: 2rpx;">名片</text></view>
</view>
<view class="fx" style="">
<image src="../../static/fenxiang.png" mode=""></image>
<view class="" style="text-align: center;"><text style="color: #969696;font-size: 24rpx;position: absolute;top: 50rpx;left: 2rpx;" @click="popup3">分享</text></view>
<uni-popup class="popup3" ref="popup3" type="bottom" background-color="#fff" >
<uni-popup-share title="分享到"></uni-popup-share>
</uni-popup>
</view>
<view class="sc" style="">
<image src="../../static/shoucang.png" mode=""></image>
<view class="" style="text-align: center;"><text style="color: #969696;font-size: 24rpx;position: absolute;top: 50rpx;left: 2rpx;">收藏</text></view>
</view>
</view>
<view class="btn"><text>联系商家</text></view>
</view>
</view>
</view>
</template>
JS：
<script>
export default {
data() {
return {
fw1: 'font-weight:400',
fw2: 'font-weight:400',
fw3: 'font-weight:400',
color1: 'color:#323232',
color2: 'color:#323232',
color3: 'color:#323232',
bgcolor: '',
list: [
{
image: '/static/ji.png'
},
{
image: '/static/ji.png'
},
{
image: '/static/ji.png'
}
],
flag: true,
top: '',
juli2: '',
juli1: 0,
juli3: ''
};
},
methods: {
todpsy(){
uni.navigateTo({
url:'../dpsy/dpsy'
})
},
popup3() {
this.$refs.popup3.open()
},
sp(e) {
this.fw1 = 'font-weight:bold';
this.fw2 = 'font-weight:400';
this.fw3 = 'font-weight:400';
this.color1 = 'color:#00ce88';
this.color2 = 'color:#323232';
this.color3 = 'color:#323232';
uni.pageScrollTo({
duration: 150,
scrollTop: this.juli1
});
},
xq(e) {
this.fw1 = 'font-weight:400';
this.fw2 = 'font-weight:bold';
this.fw3 = 'font-weight:400';
this.color1 = 'color:#323232';
this.color2 = 'color:#00ce88';
this.color3 = 'color:#323232';
uni.pageScrollTo({
duration: 150,
scrollTop: this.juli2
});
},
tj(e) {
this.fw1 = 'font-weight:400';
this.fw2 = 'font-weight:400';
this.fw3 = 'font-weight:bold';
this.color1 = 'color:#323232';
this.color2 = 'color:#323232';
this.color3 = 'color:#00ce88';
uni.pageScrollTo({
duration: 150,
scrollTop: this.juli3
});
}
},
// 通过这个方法,监听滑动的距离,通过距离,动态修改透明的
onPageScroll(e) {
if (e.scrollTop >= 0 && e.scrollTop <= 8) {
this.bgcolor = 'opacity:0';
} else if (e.scrollTop > 8 && e.scrollTop <= 16) {
this.bgcolor = 'opacity:0.1';
} else if (e.scrollTop > 16 && e.scrollTop <= 24) {
this.bgcolor = 'opacity:0.2';
} else if (e.scrollTop > 24 && e.scrollTop <= 32) {
this.bgcolor = 'opacity:0.3';
} else if (e.scrollTop > 32 && e.scrollTop <= 40) {
this.bgcolor = 'opacity:0.4';
} else if (e.scrollTop > 40 && e.scrollTop <= 48) {
this.bgcolor = 'opacity:0.5';
} else if (e.scrollTop > 48 && e.scrollTop <= 56) {
this.bgcolor = 'opacity:0.6';
} else if (e.scrollTop > 56 && e.scrollTop <= 64) {
this.bgcolor = 'opacity:0.7';
} else if (e.scrollTop > 64 && e.scrollTop <= 72) {
this.bgcolor = 'opacity:0.8';
} else if (e.scrollTop > 72 && e.scrollTop <= 80) {
this.bgcolor = 'opacity:0.9';
} else if (e.scrollTop > 80) {
this.bgcolor = 'opacity:1';
}
this.top = e.scrollTop;
// console.log(this.top);
if (e.scrollTop <= 16) {
this.flag = true;
} else {
this.flag = false;
}
if (this.top <= this.juli2 - this.juli1) {
this.fw1 = 'font-weight:bold';
this.fw2 = 'font-weight:400';
this.fw3 = 'font-weight:400';
this.color1 = 'color:#00ce88';
this.color2 = 'color:#323232';
this.color3 = 'color:#323232';
}
if (this.top >= this.juli2 && this.top < this.juli3) {
this.fw1 = 'font-weight:400';
this.fw2 = 'font-weight:bold';
this.fw3 = 'font-weight:400';
this.color1 = 'color:#323232';
this.color2 = 'color:#00ce88';
this.color3 = 'color:#323232';
}
if (this.top >= this.juli3) {
this.fw1 = 'font-weight:400';
this.fw2 = 'font-weight:400';
this.fw3 = 'font-weight:bold';
this.color1 = 'color:#323232';
this.color2 = 'color:#323232';
this.color3 = 'color:#00ce88';
}
},
// 页面加载,默认opacity:0,意为透明不显示
onLoad() {
this.fw1 = 'font-weight:bold';
this.fw2 = 'font-weight:400';
this.fw3 = 'font-weight:400';
this.color1 = 'color:#00ce88';
this.color2 = 'color:#323232';
this.color3 = 'color:#323232';
this.bgcolor = 'opacity:0';
},
mounted() {
uni.createSelectorQuery()
.select('.huopin')
.boundingClientRect(res => {
// console.log(res)
console.log('2的高度是' + res.top);
var juli2 = res.top;
this.juli2 = juli2 - 90;
})
.exec();
uni.createSelectorQuery()
.select('.end')
.boundingClientRect(res => {
console.log(res);
console.log('3的高度是' + res.top);
var juli3 = res.top;
this.juli3 = juli3 - 90;
})
.exec();
},
onHide() {
uni.pageScrollTo({
duration: 1,
scrollTop: 0
});
}
};
</script>
CSS：
<style scoped>
.head {
width: 100%;
height: 176rpx;
display: flex;
justify-content: space-around;
background-color: #fff;
position: fixed;
top: 0;
background-color: #fff;
z-index: 2;
}
.left1 {
height: 50rpx;
width: 48rpx;
position: absolute;
bottom: 20rpx;
left: 30rpx;
}
.fanhui {
width: 60rpx;
height: 60rpx;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
position: fixed;
top: 100rpx;
left: 24rpx;
z-index: 1;
}
.fanhui image {
height: 50rpx;
width: 48rpx;
margin-top: 6rpx;
transform: rotateY(180deg);
margin-left: 6rpx;
}
.left1 image {
height: 100%;
width: 100%;
}
.title1 {
width: 40%;
height: 40rpx;
font-size: 28rpx;
font-weight: bold;
font-family: 黑体;
margin: 0 auto;
color: #323232;
display: flex;
justify-content: space-between;
font-family: 黑体;
margin-top: 118rpx;
}
.title2 {
width: 40%;
height: 40rpx;
font-size: 28rpx;
font-weight: bold;
font-family: 黑体;
margin: 0 auto;
color: #323232;
display: flex;
justify-content: space-between;
font-family: 黑体;
margin-top: 20rpx;
}
.swiper {
height: 760rpx;
width: 100%;
}
.xian {
width: 96%;
height: 2rpx;
background-color: #eee;
margin-top: 20rpx;
margin-left: 2%;
}
.zuobiao {
width: 100%;
height: 50rpx;
position: relative;
}
.zuobiao image {
width: 28rpx;
height: 28rpx;
margin-top: 20rpx;
position: absolute;
left: 30rpx;
}
.kanguo {
width: 100%;
height: 50rpx;
position: relative;
}
.kanguo image {
width: 28rpx;
height: 28rpx;
margin-top: 20rpx;
position: absolute;
left: 30rpx;
}
.bg {
width: 100%;
height: 16rpx;
background-color: #eee;
margin-top: 20rpx;
}
.guige {
width: 90%;
height: 420rpx;
margin-left: 5%;
}
.first,
.two,
.three {
width: 100%;
height: 110rpx;
display: flex;
justify-content: space-between;
}
.first1,
.first2,
.first3,
.two1,
.two2,
.two3,
.three1,
.three2,
.three3 {
width: 33.3%;
height: 100%;
/* background-color: red; */
}
.first1,
.two1,
.three1 {
border-right: 1rpx solid #e8e8e8;
border-bottom: 1rpx solid #e8e8e8;
padding: 20rpx;
}
.first2,
.two2,
.three2 {
border-bottom: 1rpx solid #e8e8e8;
padding: 20rpx;
}
.first3,
.two3,
.three3 {
border-left: 1rpx solid #e8e8e8;
border-bottom: 1rpx solid #e8e8e8;
}
.first1,
.first2,
.first3 {
border-top: 1rpx solid #e8e8e8;
}
.shandong {
width: 100%;
height: 230rpx;
position: relative;
padding: 20rpx 30rpx 20rpx 30rpx;
}
.touxiang {
width: 116rpx;
height: 116rpx;
}
.huangzuan {
width: 82rpx;
height: 34rpx;
background-color: #ffc355;
position: absolute;
left: 180rpx;
top: 100rpx;
border-radius: 4rpx;
text-align: right;
padding-right: 8rpx;
}
.bao {
width: 36rpx;
height: 36rpx;
position: absolute;
top: 100rpx;
left: 280rpx;
}
.huangguan {
width: 36rpx;
height: 36rpx;
position: absolute;
top: 100rpx;
left: 330rpx;
}
.tuijian {
width: 100%;
height: 440rpx;
position: relative;
}
.tuijian1 {
width: 95%;
height: 60rpx;
display: flex;
justify-content: space-between;
padding: 20rpx;
}
.tuijian1 image {
width: 40rpx;
height: 40rpx;
transform: rotateY(180deg);
position: absolute;
right: 20rpx;
top: 20rpx;
}
.hongmao {
width: 94%;
height: 300rpx;
display: flex;
justify-content: space-around;
position: absolute;
left: 3%;
top: 120rpx;
}
.huopin {
width: 100%;
height: 530rpx;
padding: 30rpx;
}
.weinin {
width: 30%;
height: 70rpx;
position: absolute;
left: 34%;
text-align: center;
line-height: 70rpx;
color: #9e9e9e;
font-size: 28rpx;
}
.end {
width: 100%;
height: 1750rpx;
position: relative;
margin-bottom: 120rpx;
}
.lxsj {
background-color: #fff;
border-top: 1rpx solid #eee;
position: relative;
}
.mp {
width: 50rpx;
height: 90%;
position: absolute;
left: 40rpx;
top: 10rpx;
}
.mp image {
width: 50rpx;
height: 50rpx;
}
.fx {
width: 50rpx;
height: 100%;
position: absolute;
left: 130rpx;
top: 10rpx;
}
.fx image {
width: 50rpx;
height: 50rpx;
}
.sc {
width: 50rpx;
height: 100%;
position: absolute;
left: 220rpx;
top: 10rpx;
}
.sc image {
width: 50rpx;
height: 50rpx;
}
.btn {
width: 370rpx;
height: 80rpx;
background-color: #00ce88;
border-radius: 60rpx;
position: absolute;
top: 10rpx;
right: 32rpx;
text-align: center;
line-height: 74rpx;
font-size: 32rpx;
color: #ffffff;
}
</style>
