digitalMen/pages/wx/wx.vue

<template>
	<view>
		<view class="top" :style="{ backgroundColor: '#00cf8a'}">
			<!-- #ifdef MP-WEIXIN -->
			<text>erp-hr微官网企业管理之道</text>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<text>erp-hr微官网-一起拍视频!</text>
			<!-- #endif -->
		</view>
		<block v-if="isImgShow">
		  <view class="popup" @click="closeImg" >
		    <image class="bigimg"  :class="scaleSmall?'scaleSmall':' ' " src="https://13130145.s21i.faiusr.com/4/ABUIABAEGAAgut7u3gUo9NfX4QEwmgM4mgM.png"></image>
		    <block v-if="isCloseShow">
		      <image class="closeBtn" @click="closeImg" src="/static/images/tabbar_close.png"></image>
		    </block>
		  </view>
		</block>
		<view class="wrap">
			<!-- 幻灯片 -->
			<swiper autoplay="1" circular="true" class="top-banner" duration="500" interval="4000" nextMargin="10px"
			 previousMargin="10px">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item >
						<image class="slide-image" lazyLoad="true" :src="item"></image>
					</swiper-item>
				</block>
			</swiper>
			<!-- #ifdef MP-TOUTIAO -->
			<!-- <view class="padd3">
				<button class="cu-btn block bg-blue margin-tb-sm lg" open-type="share" data-channel="video" data-qrcode="inv34+23=="><text class="cuIcon-camerafill">拍摄视频</text></button>

			</view> -->
			<!-- #endif -->
			<!-- 菜单 -->
			<view class="top-tab show-banner">
				<view autoplay="false" class="top-tab-swiper" indicatorActiveColor="#FE433F" indicatorDots="1">
					<view class="top-tab-in">
						<block v-for="(item,index) in nav" :key="index">
							<view class="top-tab-li" @tap="onUrlTap" :data-event="item.event">
								<button style="background: #fff;">
									<image class="top-tab-icon" lazyLoad="true" mode="aspectFit" :src="item.img"></image>
									<view class="ellips1 top-tab-txt" style="margin-top: -25rpx;">{{item.name}}</view>
								</button>
							</view>
						</block>
					</view>
				</view>
				<!-- 头条 -->
			</view>

			<!-- 新闻 -->
			<view class="titles">· erp-hr微官网 ·</view>
			<view class='news showonload6'>
				<block v-for="(item,index) in news" :key="index">
					<view class="life-list" @click='toNesdetail(item.id)'>
						<view class="life-txt">
							<view class="ellips2">{{item.title}}</view>
						</view>
						<view class="life-img">
							<image :src="item.image"></image>
						</view>
						<!-- 时间与访问量 -->
						<view class="life-time">
							<text>{{item.flow}}人查看</text>
						</view>
					</view>
				</block>
				<!-- <navigator class="getmore" hoverClass="navigator-hover" openType="switchTab" url="../newspage/newspage">查看更多</navigator> -->
			</view>


			<!-- 服务1 -->
			<view class="service">
				<view class="service-div">
					<block v-for="(item,index) in list2" :key="index">
						<view class="service-item" >
							<image :src="item.img"></image>
							<view class="service-item-text">
								<text>{{item.title}}</text>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<view class="background">
			<view class="howGetTeacher" style='background:#FF6666;'>
				<text>erp-hr微官网人力资源咨询——人力资源规划</text>
			</view>
			<view class="detailHowGetTeacher">
				<text>
					特大好消息,特大好消息!人力资源咨询——人力资源规划.只限今天,只限今天,错过今天,后悔一年!!!
				</text>
			</view>
			<view class="howGetStudent" bindtap="showHowGetStudent" style='background:red;'>
				<text> 无需编程 一键生成</text>
			</view>
			<view class="detailHowGetStudent">
				<text>
					本地建站系统，在线快速制作生成小程序。无需编程经验，快速入门，快速制作，快速交付客户
				</text>
			</view>
			<view class="howGetStudent" bindtap="showHowGetStudent" style='background:#003366;'>
				<text> 丰富场景 持续升级</text>
			</view>
			<view class="detailHowGetStudent">
				<text>
					本地建站系统，提供各种行业解决方案，深挖需求，解决行业痛点，持续更新功能，不断提升用户体验
				</text>
			</view>
			<view class="howGetStudent" bindtap="showHowGetStudent" style='background:#99CC33;'>
				<text> 百变魔方 自由组合</text>
			</view>
			<view class="detailHowGetStudent">
				<text>
					提供了更多想象空间，提供了更多运营可能，模块间搭配使用，自由组合，让思路更开阔
				</text>
			</view>
			<view class="howGetStudent" bindtap="showHowGetStudent" style='background:#9933FF;'>
				<text> 独立后台 自主编辑</text>
			</view>
			<view class="detailHowGetStudent">
				<text>
					后台可以对自己账户下面每个小程序进行管理和编辑，小程序端及时更新。并且方便打包更新审核
				</text>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class='footer'>
			<view class='footer-content'>
				<button class='btn1' @click="onCall">电话咨询</button>
				<button class='btn2' open-type='contact'>联系客服</button>
			</view>
		</view>
		<!-- 分享 -->
		<!-- <view class='share'>
			<button open-type='share'>分享</button>
		</view> -->
		<!-- #endif -->

		<view :class="showDialog ?'zan-dialog--show zan-dialog':'zan-dialog'">
			<view bindtap="toggleDialog" class="zan-dialog__mask"></view>
			<view class="zan-dialog__container">
				<view class="a-title">关于erp-hr微官网</view>
				<view class="radio-box">
					<text>erp-hr微官网是为互联网全行业提供服务和研发支撑的开发型公司。
						致力于通过创新的信息化技术来推动社会的发展与变革，为企业提供包含了基础建设、人才培训、定制开发、电商支撑、渠道供应、托管运营等一站式解决方案，为创客或个人创造新的生活和工作方式，为社会创造价值。</text>
				</view>
				<!-- <view bindtap="toggleDialog" class="a-btn bg-origin">我知道了</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	// import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue";
import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			// uniNoticeBar
		},

		data() {
			return {
				notice: '小程序微官网全新版本来袭,要制作的联系我们',
				showDialog: !1,
				banner: ["https://www.open.com.cn//product/img/product/16984.jpg",
					"http://www.8manage.cn/uploadfile/upload/image/20170113/20170113160850_65233.png",
					"http://www.8manage.cn/uploadfile/upload/image/20170113/20170113160904_54217.png"
				],
				nav: [{
						name: "我们的产品",
						img: "https://www.dian68.net/attachment/images/24/2018/04/sqgYY2YsAuV67YInanbaxhyY21ve6y.jpg",
						url: '',
						event: 'anli'
					},
					{
						name: "热门文章",
						img: "https://www.dian68.net/attachment/images/24/2018/04/D7a7vaR7XVb3A7BiqV7aQqyQ77Vv77.jpg",
						event: 'xinwen'
					},
					{
						name: "立即制作",
						img: "https://www.dian68.net/attachment/images/24/2018/04/Z13j4YXOyY2Jt8s4i3t8sT28JTV45x.png",
						event: 'xinwen'
					},
					{
						name: "关于我们",
						img: "https://www.dian68.net/attachment/images/24/2018/04/A3UjUIU3JI8OsiqQQu8RJnRZIqJ5JE.jpg",
						event: 'about'
					}
				],
				news: [{
						id: 0,
						title: "erp-hr 提供典型的人力资源管理功能服务",
						image: "https://img1.baidu.com/it/u=125517566,2690134319&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
						flow: '3241',
					},
					{
						id: 1,
						title: "员工规划、招聘、员工档案、工资单、福利、出勤率、请假、职业管理、培训、绩效与员工自助服务",
						image: "https://img1.baidu.com/it/u=4069952875,4246168404&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
						flow: '156741',
					},
					{
						id: 2,
						title: "erp-hr 也对人力资本管理中的信息资本、结构化协作、过程与执行的纪律、KPI 与承诺管理进行了优化",
						image: "http://img.mp.itc.cn/upload/20170726/5b6743d9c47444b5b9d5d9eb3fcbbeab_th.jpg",
						flow: '156741',
					}
				],
				list2: [{
						title: "精美企业官网",
						img: "https://www.dian68.net/attachment/images/24/2018/04/D8sC888HaClFexsl8eaVeESwoDX8H0.jpg"
					},
					{
						title: "小程序分销商城",
						img: "https://www.dian68.net/attachment/images/24/2018/04/TX119VKVxtB0cQCkQ0ZMZKkS4vbwta.jpg"
					},
					{
						title: "餐饮外卖小程序",
						img: "https://www.dian68.net/attachment/images/24/2018/04/D90496sF0YDSvcZDa0Ca4YRrhqA26B.jpg"
					},
					{
						title: "同城信息网",
						img: "https://www.dian68.net/attachment/images/24/2018/04/Ztyy0YVNdwYHC0S1V3NKN5BsVTLvHS.jpg"
					}
				],
				scrollTop: 0,
				isImgShow:1,
				isCloseShow: 1,
				scaleSmall: 0,
			}
		},
		computed: {
			...mapState({
				appinfo: state => state.init.appinfo,
			})
		},
		onLoad() {
		},
		methods: {
			omService(text) {
				uni.showModal({
					title: '提示',
					content: text + ', 联系电话: 6266876',
				});
			},
			onCall() {
				uni.makePhoneCall({
					phoneNumber: '6266876'
				})
			},
			onUrlTap(e) {
				var event = e.currentTarget.dataset.event;

				if (event == 'about') {
					uni.showModal({
						title: '关于我们',
						content: '我们是为互联网全行业提供服务和研发支撑的开发型公司。 致力于通过创新的信息化技术来推动社会的发展与变革，为企业提供包含了基础建设、人才培训、定制开发、电商支撑、渠道供应、托管运营等一站式解决方案，为创客或个人创造新的生活和工作方式，为社会创造价值。'
					})
				};
				if (event == 'contact') {
					uni.showModal({
						title: '联系',
						content: ' 联系电话: 6266876'
					})
				};
				if (event == 'anli') {
					uni.pageScrollTo({
						scrollTop: 651,
						duration: 300
					});
				};
				if (event == 'xinwen') {
					uni.pageScrollTo({
						scrollTop: 284,
						duration: 300
					});
				}


			},
			toNesdetail(id) {
				uni.navigateTo({
					url: '../wx/newsdetail?id=' + id
				})
			},
			   closeImg: function() {
			        var t = this;
			        this.scaleSmall= 1;
					setTimeout(function() {
			            t.isImgShow = 0;
			            t.isCloseShow = 0
			        }, 400)
			    },
		},
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.top {
		width: 100%;
		position: fixed;
		height: 188rpx;
		top: 0;
		left: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		padding: 20rpx;

		text {
			position: absolute;
			bottom: 30rpx;
			color: #ffffff
		}
	}

	.goods-list-box {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		padding: 20rpx 10rpx;
	}

	.goods-list-box:before {
		display: block;
		position: absolute;
		bottom: 0;
		content: '';
		width: 690rpx;
		height: 1px;
		background: #e8e8e8;
	}

	.goods-list-box:last-child:before {
		height: 0;
	}

	.goods-left {
		width: 220rpx;
		height: 220rpx;
		margin-right: 16rpx;
	}

	.goods-left image {
		width: 100%;
		height: 100%;
	}

	.goods-right {
		position: relative;
		-webkit-flex-direction: column;
		flex-direction: column;
		width: 454rpx;
		height: 220rpx;
	}

	.goods-title {
		line-height: 40rpx;
		font-size: 28rpx;
		color: #333;
	}

	.goods-owner {
		line-height: 50rpx;
		font-size: 24rpx;
		color: #666;
	}

	.goods-bottom {
		position: absolute;
		bottom: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		width: 100%;
	}

	.goods-bottom-left {
		width: 270rpx;
		overflow: hidden;
	}

	.goods-bottom-clock {
		font-size: 20rpx;
		color: #FE433F;
	}

	.price-buying {
		font-size: 32rpx;
		color: #FE433F;
	}

	.price-linethrough {
		color: #AFB2BA;
		font-size: 24rpx;
		-webkit-text-decoration-line: line-through;
		text-decoration-line: line-through;
	}

	.goods-bottom-right {
		width: 176rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #fff;
		border-radius: 4rpx;
		overflow: hidden;
		font-size: 28rpx;
		box-shadow: none;
	}

	.goods-bottom-right:after {
		border: none;
	}

	.btn0 {
		background: linear-gradient(to right, #ccc, #999);
	}

	.btn1 {
		background: red;
	}

	.btn2 {
		background: linear-gradient(to right, #64CA7B, #30A04D);
	}

	.figure-box {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
	}

	.figure-box view {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	@-webkit-keyframes rotate {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes rotate {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes rotate2 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			border-top-color: #e60012;
		}

		50% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
			border-top-color: #27adf8;
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
			border-top-color: #e60012;
		}
	}

	@keyframes rotate2 {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
			border-top-color: #e60012;
		}

		50% {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
			border-top-color: #27adf8;
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
			border-top-color: #e60012;
		}
	}

	.loader1 {
		position: relative;
		margin: 400rpx auto 0;
		width: 150rpx;
		height: 150rpx;
		display: block;
		overflow: hidden;
	}

	.loader1 view {
		height: 100%;
	}

	.loader1,
	.loader1 view {
		border-radius: 50%;
		padding: 8rpx;
		border: 2rpx solid transparent;
		-webkit-animation: rotate linear 3.5s infinite;
		animation: rotate linear 3.5s infinite;
		border-top-color: #e60012;
		border-bottom-color: #27adf8;
	}

	life-txt.life-box {
		padding: 0 10rpx;
		width: 690rpx;
	}

	.life-box>view:first-child {}

	.life-box>view:last-child {
		border-bottom: 0;
	}

	.life-list {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 710rpx;
		padding: 20rpx 0;
		border-bottom: 0.1px solid #e6e6e6;
	}

	.life-listc {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 20rpx 0 60rpx;
		border-bottom: 0.1px solid #e6e6e6;
	}

	.life-list .life-txt {
		display: -webkit-flex;
		display: flex;
		-webkit-flex: 1;
		flex: 1;
		-webkit-flex-direction: column;
		flex-direction: column;
		height: 150rpx;
		line-height: 44rpx;
		font-weight: 600;
	}

	.life-list .life-txt view {
		white-space: normal;
		word-break: break-all;
	}

	.life-txt view {
		font-size: 32rpx;
	}

	.life-time {
		position: absolute;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		line-height: 20rpx;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	.life-list .life-time {
		position: absolute;
		bottom: 30rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
		line-height: 25rpx;
	}

	.life-time text {
		font-weight: 200;
		font-size: 20rpx;
		color: #666;
	}

	.life-list .life-img {
		width: 240rpx;
		height: 150rpx;
		margin-left: 10rpx;
	}

	.life-list .life-img image {
		width: 100%;
		height: 100%;
	}

	.life-listc .life-img {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 710rpx;
	}

	.life-listc .life-img image {
		width: 227rpx;
		height: 165rpx;
		padding: 20rpx 0 0;
		margin-right: 15rpx;
	}

	.life-listc .life-img image:last-child {
		margin-right: 0;
	}

	.life-listc .life-txt {
		display: -webkit-flex;
		display: flex;
		-webkit-flex: 1;
		flex: 1;
		-webkit-flex-direction: column;
		flex-direction: column;
		line-height: 44rpx;
		font-weight: 600;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.pleft {
		padding-left: 24rpx !important;
	}

	.section_gap {
		margin: 124rpx auto 0;
		width: 700rpx;
	}

	.top-tab-swiper .swiper-dots.swiper-dots-horizontal {
		margin-bottom: -20rpx;
	}

	.disc-icon {
		width: 36rpx;
		height: 25rpx;
	}

	.dis-item {
		display: -webkit-flex;
		display: flex;
		box-sizing: border-box;
		border-top: 1px solid #eee;
		padding: 30rpx 0;
	}

	.dis-item:first-child {
		border-top: 0;
	}

	.dis-item:last-child {
		padding-bottom: 0
	}

	.dis-img {
		width: 140rpx;
		height: 140rpx;
	}

	.dis-img image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.dis-right {
		padding-left: 12rpx;
	}

	.dis-shop {
		font-size: 24rpx;
		color: #999;
		margin: 8rpx 0 20rpx
	}

	.fl-item {
		display: inline-block;
		width: 108rpx;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		font-size: 18rpx;
		color: #999;
		background: rgba(179, 184, 194, 0.09699999999999999);
		border-radius: 36rpx;
		border: 1px solid #B3B8C2
	}

	.dis-fl {
		margin-top: 10rpx;
		display: -webkit-flex;
		display: flex;
	}

	.fl-left {
		-webkit-flex: 1;
		flex: 1
	}

	.fl-right {
		color: #FF4C4C;
		font-size: 36rpx;
		font-weight: 700;
	}

	.choujiangbox {
		width: 100%;
		height: 394rpx;
		background: url(http://papaq.oss-cn-hangzhou.aliyuncs.com/xcx/AZRRTcpH78aybzjpCNekHT.png) no-repeat;
		background-size: 100%;
		background-position: 0 0;
		overflow: hidden;
	}

	.choujiangswiper {
		margin-top: 124rpx;
		height: 240rpx;
		overflow: hidden;
	}

	.cj-item {
		position: relative;
		display: inline-block;
		width: 690rpx;
		height: 240rpx;
		padding: 20rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.cj-item:nth-of-type(1) {
		z-index: 100;
	}

	.cj-item:nth-of-type(2) {
		-webkit-transform: translateX(-680rpx);
		transform: translateX(-680rpx);
		height: 230rpx;
		z-index: 80;
		opacity: 0.8;
	}

	.cj-right {
		position: relative;
		padding-left: 12rpx;
		width: 320rpx;
		float: left;
	}

	.cj-title {
		width: 330rpx;
		height: 76rpx;
		font-size: 28rpx;
		white-space: normal !important;
		font-weight: 700;
		line-height: 1.5;
	}

	.cj-img {
		height: 200rpx;
		width: 300rpx;
		float: left;
	}

	.cj-img image {
		width: 100%;
		height: 100%;
	}

	.cj-time-txt {
		color: #999;
		font-size: 24rpx;
	}

	.cj-time {
		margin-top: 48rpx;
	}

	.gotxt {
		position: absolute;
		height: 56rpx;
		width: 56rpx;
		background: #fec53f;
		color: #fff;
		border-radius: 56rpx;
		text-align: center;
		line-height: 56rpx;
		right: -10rpx;
		bottom: 10rpx;
	}

	.cj-time-show .timenum {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 8rpx;
		background: #fe433f;
		color: #fff;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.dot {
		display: inline-block;
		width: 16rpx;
		height: 32rpx;
		border-radius: 8rpx;
		color: #fe433f;
		font-size: 24rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.mybuyingbox {
		background: #fff;
	}

	.buying-sw-item {
		width: 700rpx;
		margin: 0 auto;
		box-sizing: border-box;
		clear: both;
	}

	.buying-item {
		width: 700rpx;
		border-radius: 20rpx;
		border: 1px solid rgba(238, 238, 238, 1);
		overflow: hidden;
		display: inline-block;
		position: relative;
		background: #fff;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
	}

	.shop-title {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-align-items: center;
		align-items: center;
		padding: 30rpx 30rpx 0 30rpx;
	}

	.buying-icon {
		display: block;
		width: 60rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.shop-title-t {
		font-size: 32rpx;
		color: #333;
		background-size: 14rpx 24rpx;
		margin-right: 8rpx;
		font-weight: 700;
	}

	.more {
		position: absolute;
		right: 30rpx;
		font-size: 24rpx;
		color: #999;
		background: url("http://papaq.oss-cn-hangzhou.aliyuncs.com/ppqpc/35taE3JBE6DsQmTcBDCr5k.png") center right no-repeat;
		background-size: 14rpx 24rpx;
		width: 67rpx;
	}

	.subtitle {
		padding-left: 30rpx;
		font-size: 28rpx;
		color: #666;
		padding-top: 10rpx;
	}

	.buyingswiper {
		margin-top: 34rpx;
	}

	.rec-buyingimg {
		height: 350rpx;
		width: 100%;
	}

	.buyingtitle {
		height: 88rpx;
		width: 100%;
		font-size: 32rpx;
		color: #333;
		padding: 0 20rpx;
		box-sizing: border-box;
		line-height: 88rpx;
	}

	.hui-text {
		text-decoration: line-through;
		color: #afb2ba;
		font-size: 28rpx;
	}

	.buyingitem-bottom {
		display: -webkit-flex;
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.buyingprice-red {
		color: #fe433f;
		font-size: 40rpx;
	}

	.bib-dobuying {
		height: 72rpx;
		width: 176rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 24rpx;
		background: #fec53f;
		color: #fff;
		border-radius: 72rpx;
		margin-left: 125rpx;
		margin-top: 10rpx;
	}

	.bib-left {
		-webkit-flex: 1;
		flex: 1;
	}

	.bib-left {
		padding-top: 10rpx;
	}

	.bib-right {
		text-align: center;
	}

	.puzzle {
		padding: 0 30rpx;
		clear: both;
		overflow: hidden;
		margin-top: 10rpx;
		background: #fff;
	}

	.puzzle-top {
		padding: 30rpx 0 0 0;
	}

	.puzzlist {
		background-color: #fff;
		margin-right: 22rpx;
		width: 334rpx;
		float: left;
		margin-bottom: 10rpx;
	}

	.puzzle-sub {
		padding: 0;
		margin-bottom: 40rpx;
		padding-top: 10rpx;
	}

	.puzzle-icon {
		width: 40rpx;
		height: 34rpx;
	}

	.puzzlist:nth-child(even) {
		margin-right: 0;
	}

	.puzzimg {
		width: 334rpx;
		height: 326rpx;
		display: block;
	}

	.puzztitle {
		padding: 8rpx 12rpx;
		font-weight: 500;
		line-height: 42rpx;
		height: 80rpx;
	}

	.groups {
		font-size: 24rpx;
		color: #fff;
		background: linear-gradient(135deg, rgba(255, 104, 107, 1), rgba(255, 74, 83, 1));
		border-radius: 4rpx;
		text-align: center;
		padding: 2rpx 10rpx;
		margin-right: 10rpx;
	}

	.puzzname {
		color: #999;
		padding: 0rpx 12rpx;
		margin-bottom: 8rpx;
	}

	.puzzprice {
		color: #fe433f;
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
		top: -4rpx;
	}

	.puzzbot {
		padding: 12rpx;
	}

	.headurl {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		margin-right: -12rpx;
		border: 1px solid #fff;
	}

	.headurl:first-child {
		position: relative;
		z-index: 2;
	}

	.headurl:nth-child(2) {
		position: relative;
		z-index: 1;
	}

	.headurl:last-child {
		margin-right: 0;
	}

	.couponbox {
		background: #fff;
		padding: 0 30rpx;
		padding-bottom: 30rpx;
		margin-top: 12rpx;
		overflow: hidden;
	}

	.coupon-icon {
		width: 42rpx;
		height: 46rpx;
	}

	.unitItemLeft {
		margin-bottom: 20rpx;
	}

	.couponlist1 {
		background: url("http://papaq.oss-cn-hangzhou.aliyuncs.com/xcx/c75MFr8WybpPbmzw4ZAds6.png") no-repeat;
	}

	.couponlist2 {
		background: url("http://papaq.oss-cn-hangzhou.aliyuncs.com/xcx/aHpEfcMmxSDHpQarwc5dTr.png") no-repeat;
	}

	.couponlist3 {
		background: url("http://papaq.oss-cn-hangzhou.aliyuncs.com/xcx/HBHCcfaHnDp68x4yWDP2EZ.png") no-repeat;
	}

	.couponlist {
		padding: 16rpx;
		background-size: 100% 198rpx;
		margin-top: 10rpx;
	}

	.cou-img {
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin-right: 16rpx;
	}

	.cou-con {
		margin-right: 90rpx;
	}

	.cou-title {
		color: #fe433f;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 25rpx;
	}

	.cou-name {
		color: #333;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.cou-desc {
		color: #999;
	}

	.sec-coupon {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		padding: 30rpx 0 0;
		border-bottom: 1px solid #e6e6e6;
	}

	.sec-coupon-l {
		width: 160rpx;
		height: 160rpx;
		margin-right: 16rpx;
		margin-bottom: 30rpx;
	}

	.sec-coupon-l image {
		width: 100%;
		height: 100%;
	}

	.sec-coupon-r {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		width: 534rpx;
	}

	.sec-coupon-title {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.sec-coupon-descript {
		display: -webkit-flex;
		display: flex;
		width: 514rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #999;
	}

	.sec-coupon-btn {
		position: relative;
		margin-bottom: 30rpx;
	}

	.sec-coupon-btn-l {
		width: 370rpx;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	.sec-coupon-btn-l text:first-child {
		line-height: 36rpx;
		font-size: 32rpx;
		margin-bottom: 12rpx;
		text-indent: 1em;
	}

	.sec-coupon-btn-l text:last-child {
		font-size: 20rpx;
		color: #999;
	}

	.sec-coupon-btn-z {
		color: #009688;
		background: url('http://papaq.oss-cn-hangzhou.aliyuncs.com/ppqpc/bztiwJnMbEhmMpzr2Yycsb.png') center left no-repeat;
		background-size: 24rpx 24rpx;
	}

	.sec-coupon-btn-s {
		color: #48a8ff;
		background: url('http://papaq.oss-cn-hangzhou.aliyuncs.com/ppqpc/3cPaHX5mEJ76AtYKmxQBmK.png') top left no-repeat;
		background-size: 24rpx 24rpx;
	}

	.sec-coupon-btn-q {
		color: #fe433f;
		background: url('http://papaq.oss-cn-hangzhou.aliyuncs.com/ppqpc/hWQtSSNcGpxQ6aMewZFtKH.png') center left no-repeat;
		background-size: 24rpx 24rpx;
	}

	.sec-coupon-btn-r {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 156rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 4rpx;
		color: #fff;
		font-weight: 400;
		text-align: center;
		font-size: 24rpx;
	}

	.cut-red {
		color: #fe433f;
		font-size: 24rpx;
		font-weight: 600;
	}

	.cut-shop {
		width: 400rpx;
		padding-left: 20rpx;
		color: #999;
		font-size: 28rpx;
	}

	.cut-price {
		font-size: 40rpx;
	}

	.cut-bottom {
		margin-top: 0;
	}

	.cut-do {
		margin-top: 0;
	}

	.cut-icon {
		width: 35rpx;
		height: 31rpx;
	}

	.ad-box-type {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		background: #fff;
		padding: 20rpx;
	}

	.one-btn {
		width: 710rpx;
		height: 200rpx;
	}

	.one-btn image {
		width: 100%;
		height: 100%;
	}

	.two-btn {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 710rpx;
	}

	.two-btn image {
		width: 346rpx;
		height: 200rpx;
	}

	.two-btn image:first-child {
		margin-right: 20rpx;
	}

	.three-btn {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 710rpx;
	}

	.three-btn>image {
		width: 223rpx;
		height: 313rpx;
		margin-right: 20rpx;
	}

	.three-btn>image:last-child {
		margin-right: 0;
	}

	.none-title {
		margin-top: 0;
		padding: 20rpx 20rpx 20rpx 20rpx;
	}

	.mart12 {
		margin-top: 12rpx;
	}

	.popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 888;
	}

	.popup .bigimg {
		width: 600rpx;
		height: 800rpx;
		z-index: 999;
		position: absolute;
		left: 75rpx;
		top: 340rpx;
	}

	.scaleSmall {
		-webkit-animation: myscalesmall 0.6s;
		animation: myscalesmall 0.6s;
	}

	.scaleBig {
		-webkit-animation: myscaleBig 0.8s;
		animation: myscaleBig 0.8s;
	}

	@-webkit-keyframes myscalesmall {
		from {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		to {
			-webkit-transform: scale(0);
			transform: scale(0);
			left: 350rpx;
			top: 600rpx;
		}
	}

	@keyframes myscalesmall {
		from {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		to {
			-webkit-transform: scale(0);
			transform: scale(0);
			left: 350rpx;
			top: 600rpx;
		}
	}

	@-webkit-keyframes myscalebig {
		from {
			left: 350rpx;
			top: 600rpx;
			-webkit-transform: scale(0);
			transform: scale(0);
		}

		to {
			left: 75rpx;
			top: 140rpx;
		}
	}

	@keyframes myscalebig {
		from {
			left: 350rpx;
			top: 600rpx;
			-webkit-transform: scale(0);
			transform: scale(0);
		}

		to {
			left: 75rpx;
			top: 140rpx;
		}
	}

	.closeBtn {
		z-index: 999;
		width: 48rpx;
		height: 48rpx;
		border-radius: 48rpx;
		border: 1px solid #fff;
		text-align: center;
		line-height: 48rpx;
		color: #fff;
		position: absolute;
		left: 623rpx;
		top: 340rpx;
	}

	.smallimgwrap {
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 777;
	}

	.smallimg {
		width: 100rpx;
		height: 100rpx;
	}

	.wrap {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		z-index: 2;
		margin-top: 188rpx;
	}

	.top-banner {
		position: relative;
		width: 750rpx;
		height: 300rpx;
		z-index: -1;
		margin: 10rpx 0;
	}

	.top-banner2 {
		position: relative;
		width: 750rpx;
		height: 300rpx;
		z-index: -1;
		margin: 10rpx 0;
	}

	.slide-image {
		width: 99%;
		height: 100%;
		border-radius: 6rpx;
	}

	.top-tab-swiper {
		// padding-bottom: 20rpx;
	}

	.top-tab {
		padding: 25rpx 0 0;
		background: #fff;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 14px;
		z-index: 2;
		border-radius: 8rpx;
	}

	.top-tab-in {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.top-tab-in>view:nth-child(1) {
		padding-bottom: 20rpx;
	}

	.top-tab-in>view:nth-child(6) {
		padding-bottom: 40rpx;
	}

	.top-tab-inc {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		height: 72rpx;
		line-height: 72rpx;
	}

	.advice-txt {
		display: inline-block;
		width: 466rpx;
		margin-right: 10rpx;
		-webkit-align-items: center;
		align-items: center;
	}

	.advice-txt text {
		line-height: 36rpx;
	}

	.advice-img {
		position: relative;
		width: 124rpx;
		height: 72rpx;
	}

	.advice-img image {
		width: 100%;
		height: 100%;
	}

	.advice-img text {
		position: absolute;
		top: 0;
		left: 0;
		width: 40%;
		height: 100%;
		background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
		z-index: 1;
	}

	.top-tab-li {
		width: 25%;
		text-align: center;
		color: #666;
		font-size: 24rpx;
	}

	.top-tab-icon {
		width: 100rpx;
		height: 100rpx;
	}

	.top-tab-txt {
		font-size: 24rpx;
		color: #666;
	}

	.advice {
		margin: 20rpx 30rpx 20rpx;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.life-top {
		display: block;
		width: 70rpx;
		height: 72rpx;
		margin-right: 20rpx;
	}

	.life-top .lifetext {
		line-height: 36rpx;
		color: #fe433f;
		font-weight: 600;
		font-size: 32rpx;
		width: 70rpx;
		display: block;
		word-wrap: normal;
		word-break: break-all;
		text-align: center;
	}

	.advice swiper {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
	}

	.show-banner {}

	.nav300 {
		height: 290rpx;
	}

	.nav150 {
		height: 150rpx;
	}

	.nominate {
		background: #fff;
		padding: 20rpx;
		margin-top: 16rpx;
		border-bottom: 12rpx solid #f2f3f4;
	}

	.nominate-a,
	.nominate-b {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	.nominate-a-content {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.nominate-a-content-l {
		width: 200rpx;
		height: 200rpx;
		margin-right: 16rpx;
	}

	.nominate-a-content-r {
		position: relative;
		height: 200rpx;
		-webkit-flex: 1;
		flex: 1;
	}

	.nominate-a-content-r .ellips2 {
		line-height: 40rpx;
	}

	.nominate-a-btn {
		position: absolute;
		bottom: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		overflow: hidden;
	}

	.nominate-b-btna,
	.nominate-b-btnb {
		font-size: 28rpx;
		color: #333;
		width: 160rpx;
		text-align: center;
	}

	.nominate-b-btnc {
		width: 100%;
		font-size: 28rpx;
		text-align: center;
		background: #ff5350;
		color: #fff;
		font-weight: 400;
	}

	.nominate-a-btna,
	.nominate-a-btnb {
		font-size: 28rpx;
		color: #333;
		min-width: 93rpx;
		max-width: 300rpx;
		text-align: center;
		padding: 0 40rpx;
	}

	.nominate-a-btna,
	.nominate-b-btna {
		background: #ffe760;
		color: #ff5350;
		font-weight: 600;
	}

	.nominate-a-btnb,
	.nominate-b-btnb {
		background: #ff5350;
		color: #fff;
		font-weight: 400;
	}

	.nominate-b-box {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	.nominate-b-box view:first-child {
		margin-right: 10rpx;
	}

	.nominate-b-content {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex: 1;
		flex: 1;
		-webkit-flex-direction: column;
		flex-direction: column;
	}

	.nominate-b5,
	.nominate-b1,
	.nominate-b2 {
		line-height: 40rpx;
	}

	.nominate-b5 {
		height: 40rpx;
	}

	.nominate-b2 {
		color: #999;
		font-size: 24rpx;
	}

	.nominate-b3 {
		width: 345rpx;
		height: 230rpx;
		margin: 10rpx auto;
		position: relative;
	}

	.nominate-b3 image {
		width: 100%;
		height: 100%;
	}

	.nominate-b4 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 310rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin: 0 auto;
		border-radius: 32rpx;
		overflow: hidden;
	}

	.nominate-name {
		color: #999;
		font-size: 24rpx;
	}

	.c-title {
		display: inline-block;
		position: relative;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		text-indent: 0.5em;
		font-weight: 600;
	}

	.c-title:before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 4rpx;
		height: 32rpx;
	}

	.title-red {
		color: #ff4300;
	}

	.title-red:before {
		background: #ff4300;
	}

	.title-blue {
		color: #48a8ff;
	}

	.title-blue:before {
		background: #48a8ff;
	}

	.title-yellow {
		color: #ffd238;
	}

	.title-yellow:before {
		background: #ffd238;
	}

	.life-out-box {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		background: #fff;
		margin-top: 12rpx;
		padding: 20rpx 20rpx 0 20rpx;
	}

	.relogin {
		position: fixed;
		top: 65%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #fff;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.vipimg {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 1px;
		z-index: -100000;
	}

	.buying-item-bottom {
		width: 100%;
		border-radius: 0;
	}

	.buying-price {
		background: #fff;
		-webkit-flex: 1;
		flex: 1;
		text-align: left;
		padding: 0;
	}

	.buying-btn {
		width: 156rpx;
		padding: 0;
		box-sizing: border-box;
		background: linear-gradient(to right, #ff8331, #fe433f);
	}

	.item-bottom {
		display: -webkit-flex;
		display: flex;
		padding: 0;
	}

	.shopname {
		-webkit-flex: 1;
		flex: 1;
		text-align: left;
		color: #666;
		font-size: 24rpx;
		padding: 0 !important;
		text-indent: 0;
		height: 40rpx;
		line-height: 40rpx;
		width: 120rpx;
	}

	.price-num {
		-webkit-flex: 1;
		flex: 1;
		text-align: right;
		color: #fe433f;
		font-size: 28rpx;
		padding-right: 20rpx;
		height: 40rpx;
		width: 120rpx;
	}

	.tip-img {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		width: 104rpx !important;
		height: 40rpx !important;
	}

	.three-top {
		height: 384rpx;
		width: 100%;
	}

	.threeTop-img {
		height: 300rpx;
		width: 710rpx;
		overflow: hidden;
		position: relative;
	}

	.threeTop-img .buyingImg {
		width: 100%;
		height: 100%;
	}

	.margintop10 {
		margin-top: 10rpx;
	}

	.tuijianbox {
		margin-top: 20rpx;
	}

	.item-wrap {
		height: 240rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: -webkit-flex;
		display: flex;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.item-l {
		width: 300rpx;
	}

	.item-l image {
		width: 300rpx;
		height: 200rpx;
	}

	.item-r {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.item-r-top {
		display: -webkit-flex;
		display: flex;
		margin-bottom: 20rpx;
	}

	.top-l {
		width: 104rpx;
		height: 40rpx;
		background: #fe433f;
		color: #fff;
		line-height: 40rpx;
		text-align: center;
		font-size: 20rpx;
		border-radius: 5rpx;
	}

	.top-r {
		padding-left: 20rpx;
	}

	.timeitem {
		display: inline-block;
		width: 26rpx;
		height: 28rpx;
		background: #333;
		color: #fff;
		font-size: 20rpx;
		line-height: 28rpx;
		text-align: center;
	}

	.item-title {
		height: 80rpx;
		width: 390rpx;
	}

	.dian {
		display: inline-block;
		width: 20rpx;
		text-align: center;
		height: 28rpx;
		line-height: 28rpx;
		background: #fff;
		color: #333;
		font-size: 20rpx;
	}

	.price-bar {
		margin-top: 20rpx;
	}

	.buyingprice {
		margin-right: 10rpx;
		color: #fe433f;
		font-size: 32rpx;
	}

	.price {
		color: #999;
		font-size: 28rpx;
		text-decoration: line-through;
	}

	.timebar {
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		background: #333;
		color: #fff;
		font-size: 20rpx;
		border-radius: 5rpx;
	}

	.joinnum {
		color: #fe433f;
		font-size: 28rpx;
	}

	.cut-txt {
		color: #666;
	}

	.coupon-item {
		height: 240rpx;
		position: relative;
		background: url('http://papaq.oss-cn-hangzhou.aliyuncs.com/xcx/58Pa53WHXYzE33bd8AMnrS.png') no-repeat;
		background-position: 0 0;
		background-size: 100% 240rpx;
		display: -webkit-flex;
		display: flex;
		padding: 18rpx 40rpx;
	}

	.coupon-item image {
		width: 100%;
		height: 240rpx;
	}

	.coupon-l {
		padding: 50rpx 32rpx 0;
	}

	.top-text {
		width: 104rpx;
		height: 40rpx;
		background: #fff;
		color: #fe433f;
		line-height: 40rpx;
		text-align: center;
		font-size: 20rpx;
		border-radius: 5rpx;
	}

	.cou-l-top {
		display: -webkit-flex;
		display: flex;
	}

	.coupon-title {
		font-size: 40rpx;
		color: #fff;
		width: 230rpx;
	}

	.cou-shopname {
		width: 364rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.cou-uselimit {
		width: 364rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.coupon-r {
		-webkit-flex: 5;
		flex: 5;
		overflow: hidden;
		position: relative;
	}

	.coupon-r image {
		position: absolute;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		right: 30rpx;
		top: 32rpx;
	}

	.itemtwo-wrap {
		height: 220rpx;
		display: -webkit-flex;
		display: flex;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.itemtwo-l,
	.itemtwo-r {
		-webkit-flex: 6;
		flex: 6;
		padding: 20rpx;
	}

	.itemtwo-l {
		border-right: 1px solid #e8e8e8;
	}

	.itemtwo-l:nth-child(even) {
		border-right: none;
	}

	.coupon-col {
		background: #f8ad3f;
		color: #fff;
	}

	.buyinginfo {
		display: -webkit-flex;
		display: flex;
	}

	.buyinginfo image {
		width: 120rpx;
		height: 120rpx;
	}

	.inforight {
		padding-left: 20rpx;
	}

	.twobuyingtitle {
		width: 195rpx;
		font-size: 24rpx;
		height: 68rpx;
		line-height: 68rpx;
	}

	.twoprice {
		margin-top: 20rpx;
	}

	.twobuyingprice,
	.twoprice {
		font-size: 24rpx;
	}

	.coupontitle {
		width: 195rpx;
		font-size: 24rpx;
		color: #fe433f;
	}

	.coushopname {
		width: 195rpx;
		margin: 10rpx 0;
	}

	.coulimit {
		width: 195rpx;
		font-size: 24rpx;
		color: #666;
	}

	.pingou {
		background: #009688;
	}

	.cuttip {
		background: #48a8ff;
	}

	.twocutjoinnum {
		color: #fe433f;
		font-size: 24rpx;
	}

	.cutjointext {
		color: #666;
	}

	/* 服务 */
	.service {
		margin-top: 15rpx;
		background: white;
	}

	.scroll_view {
		width: 100%;
		white-space: nowrap;
		background: #f1f1f1;
		padding: 10rpx 0 10rpx 10rpx;
	}

	.service-item2 {
		display: inline-block;
	}

	.service-item image {
		width: 100%;
		height: 210rpx;
	}

	.title {
		height: 65rpx;
		line-height: 65rpx;
		background: white;
		border-left: 5px solid #2d7dee;
		font-size: 14px;
		border-bottom: 1px solid #f3f3f3;
		text-indent: 10px;
		display: flex;
		justify-content: space-between;
	}

	.title3 {
		height: 65rpx;
		line-height: 65rpx;
		background: white;
		font-size: 14px;
		border-bottom: 1px dotted #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	.title3_left {
		display: flex;
		height: 65rpx;
		line-height: 65rpx;
	}

	.title3_left_border {
		border-left: 4px solid #2d7dee;
		height: 33rpx;
		margin-top: 17rpx;
		margin-left: 20rpx;
	}

	.title3_name {
		text-align: left;
		text-indent: 15rpx;
		color: #666666;
	}

	.more {
		margin-right: 8px;
		color: #999;
		font-size: 12px;
	}

	.service-div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.service-item {
		width: 46%;
		margin: 5px;
		text-align: center;
	}

	.service-item {
		width: 46%;
		margin: 5px;
		text-align: center;
	}

	.service-item image {
		width: 100%;
		height: 105px;
		border-radius: 15rpx;
	}

	.service-item-text {
		font-size: 13px;
		text-align: center;
		color: #6e6e6e;
		line-height: 30rpx;
	}

	.image-item {
		width: 96%;
		margin: 0rpx auto;
		text-align: center;
		padding-bottom: 10rpx;
		position: relative;
		height: 400rpx;
	}

	.image-item image {
		height: 400rpx;
		border-radius: 4rpx;
	}

	.image-position {
		width: 100%;
		position: absolute;
		top: 340rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.image-position {
		width: 100%;
		position: absolute;
		top: 340rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.image-item-bg {
		background: #333;
		opacity: 0.4;
		z-index: 2;
	}

	.image-item-text {
		color: white;
		font-size: 16px;
		z-index: 6;
		text-align: center;
	}

	.image-item image {
		width: 100%;
	}

	.video-item image {
		height: 400rpx;
		width: 100%;
	}

	.video-item {
		height: 400rpx;
	}

	.video-item .image-position {
		top: 0px;
		height: 400rpx;
	}

	.video_text {
		width: 100%;
		height: 20px;
		margin-top: 350rpx;
		font-size: 14px;
	}

	.playimg_div {
		position: absolute;
		z-index: 99;
		width: 100%;
		height: 400rpx;
		top: 0px;
	}

	.playimg_div image {
		width: 80rpx;
		height: 80rpx;
		margin-top: 160rpx;
	}

	.image-item video {
		width: 100%;
		height: 400rpx;
	}

	.footer {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #ff8331;
		opacity: 0.8;
		z-index: 9;
	}

	.footer-content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.footer button {
		-webkit-flex: 1;
		flex: 1;
		max-width: 100%;
		height: 100%;
		line-height: 100rpx;
		color: #fff;
		font-weight: 100%;
	}

	.share {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: fixed;
		right: 20rpx;
		bottom: 150rpx;
		background: green;
		z-index: 9;
		text-align: center;
	}

	.share button {
		width: 100%;
		height: 100%;
		color: #fff;
		line-height: 100rpx;
		font-weight: 700;
		background: red;
	}

	.zan-dialog {
		z-index: 1000;
	}

	.zan-dialog__container {
		background: #f2f3f4;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.a-title {
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666;
	}

	.a-btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
	}

	.radio-group {
		padding: 0 20rpx 30rpx 20rpx;
	}

	.radio-list {
		position: relative;
		width: 700rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		background: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.radio-list:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 10rpx;
		height: 100%;
	}

	radio-group .radio:nth-child(odd) .radio-list:before {
		background: linear-gradient(#ff9e75, #ff3943);
	}

	radio-group .radio:nth-child(even) .radio-list:before {
		background: linear-gradient(#ffde70, #f59324);
	}

	.radio-list-top {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: center;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.radio-list-l {
		display: -webkit-flex;
		display: flex;
		align-items: center;
	}

	.radio-list-l image {
		width: 64rpx;
		height: 64rpx;
		display: inline;
	}

	.radio-list-l text:first-child {
		padding-left: 42rpx;
		font-size: 32rpx;
	}

	/* .radio-list-l text:last-child { font-size: 64rpx; font-weight: 600; } */
	.radio-list-bottom {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		border-top: 1px solid #f2f3f4;
	}

	.radio-list-bottom text:first-child,
	.radio-list-bottom text:last-child {
		padding-top: 20rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: #999;
	}

	.radio-list-bottom text:first-child {
		width: 500rpx;
	}

	.radio-box {
		height: 740rpx;
		overflow-y: scroll;
		padding: 10rpx 30rpx;
	}

	.zan-dialog__containerb {
		background: #fff;
	}

	.use-input {
		display: block;
		width: 650rpx;
		height: 98rpx;
		margin: 0 30rpx;
		padding: 0 20rpx;
		background: #f2f3f4;
		border-radius: 8rpx;
		text-align: center;
	}

	.use-time {
		line-height: 64rpx;
		text-align: center;
		color: #999;
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}

	.recommend-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1000;
	}

	.recommend-mask image {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 560rpx;
		height: 914rpx;
	}

	.recommend-mask icon {
		position: absolute;
		right: 80rpx;
		top: 80rpx;
	}

	.fixed-btn {
		position: absolute;
		top: 20%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #999;
		text-align: center;
		z-index: 2;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0 0 10px #e6e6e6 inset;
	}

	.none-vip {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fa6248;
	}

	.none-vip image {
		display: block;
		margin: 100rpx auto 20rpx;
	}

	.none-vip view {
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}

	.header-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 94%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 1;
	}

	.header-mask-title {
		padding-top: 148rpx;
		padding-bottom: 20rpx;
		text-align: center;
		color: #fff;
	}

	.header-mask-open {
		width: 208rpx;
		height: 72rpx;
		line-height: 72rpx;
		margin: 0 auto;
		border-radius: 36rpx;
		text-align: center;
		color: #fff;
	}

	.mask0 {
		opacity: .2;
	}

	.background {
		background-color: #fff;
		margin-top: 20rpx;
		margin-bottom: 150rpx;
	}

	.howGetTeacher,
	.howGetStudent,
	.protectPrivacy,
	.aboutSalary {
		margin: 0rpx 20rpx 0rpx 20rpx;
		padding: 30rpx 0rpx 30rpx 0rpx;
		border-bottom: 1px solid #f0f0f0;
		background-color: #fff;
		color: #fff
	}

	.security {
		margin: 0rpx 20rpx 0rpx 20rpx;
		padding: 30rpx 0rpx 30rpx 0rpx;
		background-color: #fff;
	}

	.downArrow {
		float: right;
		width: 30rpx;
		height: 30rpx;
	}

	.detailHowGetTeacher,
	.detailHowGetStudent,
	.detailProtectPrivacy,
	.detailAboutSalary {
		color: #757575;
		font-size: 33rpx;
		margin: 0rpx 20rpx 0rpx 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 6px solid #f0f0f0;
		background-color: #fff;
	}

	.howGetTeacher text,
	.howGetStudent text {
		padding-left: 10rpx;
	}

	.detailSecurity {
		color: #757575;
		font-size: 33rpx;
		margin: 0rpx 20rpx 0rpx 20rpx;
		padding-bottom: 150rpx;
		background-color: #fff;
	}

	.bottom {
		display: flex;
		z-index: 99;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		border-top: 1px solid #d9d9d9;
	}

	.feedbackIcon {
		width: 40rpx;
		height: 40rpx;
		border: none;
	}

	.feedbackText {
		vertical-align: middle;
		color: #fe4c40;
	}

	.iconText {
		display: flex;
		margin: auto;
	}

	.pop {
		width: 100%;
		height: 100%;
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .7);
	}

	.pop-box {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pop-container {
		width: 600rpx;
		height: 500rpx;
		background: #fff;
		padding: 20rpx 40rpx;
		text-align: center;
		position: relative;
		overflow: scroll;
		scroll-x: none;
		border-radius: 15rpx;
	}

	.pop-container textarea {
		width: 500rpx;
		height: 90%;
	}

	.pop-container .btn {
		padding: 10rpx 50rpx;
		background: red;
		color: #fff;
		margin: 20rpx 0;
	}

	.pop-container text {
		font-size: 30rpx;
		word-break: 2;
	}

	.titles {
		font-size: 17px;
		font-weight: bold;
		text-align: center;
		margin: 24rpx 0 12rpx;
	}

	.news {
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx;
	}

	life-txt.life-box {
		padding: 0 10rpx;
		width: 690rpx;
	}

	.life-box>view:first-child {}

	.life-box>view:last-child {
		border-bottom: 0;
	}

	.life-list {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 710rpx;
		padding: 20rpx 0;
		border-bottom: 0.1px solid #e6e6e6;
	}

	.life-listc {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 20rpx 0 60rpx;
		border-bottom: 0.1px solid #e6e6e6;
	}

	.life-list .life-txt {
		display: -webkit-flex;
		display: flex;
		-webkit-flex: 1;
		flex: 1;
		-webkit-flex-direction: column;
		flex-direction: column;
		height: 150rpx;
		line-height: 44rpx;
		font-weight: 600;
	}

	.life-list .life-txt view {
		font-size: 32rpx;
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.life-time {
		position: absolute;
		bottom: 30rpx;
		left: 0;
		width: 100%;
		line-height: 20rpx;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		justify-content: flex-end;
	}

	.life-list .life-time {
		position: absolute;
		bottom: 30rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
		line-height: 25rpx;
	}

	.life-time text {
		font-weight: 200;
		font-size: 20rpx;
		color: #666;
	}

	.life-list .life-img {
		width: 240rpx;
		height: 150rpx;
		margin-left: 10rpx;
	}

	.life-list .life-img image {
		width: 100%;
		height: 100%;
	}

	.life-listc .life-img {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 710rpx;
	}

	.life-listc .life-img image {
		width: 227rpx;
		height: 165rpx;
		padding: 20rpx 0 0;
		margin-right: 15rpx;
	}

	.life-listc .life-img image:last-child {
		margin-right: 0;
	}

	.life-listc .life-txt {
		display: -webkit-flex;
		display: flex;
		-webkit-flex: 1;
		flex: 1;
		-webkit-flex-direction: column;
		flex-direction: column;
		line-height: 44rpx;
		font-weight: 600;
	}

	/* 更多新闻 */
	.getmore {
		background: #f6f7fb;
		color: #f53333;
		border: none;
		text-align: center;
		border-radius: 5px;
		padding: 10px;
		margin: 15px 0;
		font-size: 15px;
	}

	.getmore:after {
		border: none;
	}

	.btn {
		border: none;
		padding: 0;
		margin: 0;
		display: inline;
		line-height: 1.5;
	}

	.btn::after {
		border: none;
	}
	
	// .popup { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 888; }
	// .popup .bigimg { width: 600rpx; height: 800rpx; z-index: 999; position: absolute; left: 75rpx; top: 140rpx; }
	// .scaleSmall { -webkit-animation: myscalesmall 0.6s; animation: myscalesmall 0.6s; }
	// .scaleBig { -webkit-animation: myscaleBig 0.8s; animation: myscaleBig 0.8s; }
	// @-webkit-keyframes myscalesmall { from { -webkit-transform: scale(1); transform: scale(1); }
	// to { -webkit-transform: scale(0); transform: scale(0); left: 350rpx; top: 600rpx; }
	// }@keyframes myscalesmall { from { -webkit-transform: scale(1); transform: scale(1); }
	// to { -webkit-transform: scale(0); transform: scale(0); left: 350rpx; top: 600rpx; }
	// }@-webkit-keyframes myscalebig { from { left: 350rpx; top: 600rpx; -webkit-transform: scale(0); transform: scale(0); }
	// to { left: 75rpx; top: 140rpx; }
	// }@keyframes myscalebig { from { left: 350rpx; top: 600rpx; -webkit-transform: scale(0); transform: scale(0); }
	// to { left: 75rpx; top: 140rpx; }
	// }.closeBtn { z-index: 999; width: 48rpx; height: 48rpx; border-radius: 48rpx; border: 1px solid #fff; text-align: center; line-height: 48rpx; color: #fff; position: absolute; left:623rpx; top:140rpx; }
</style>