feat:留资页 更改部分vue

布局、json

wx/staticres/common-module/tripartiteAuth/css/tripartiteAuth.css

@@ -0,0 +1,411 @@
+body,
+html {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background: #fff;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #fff;
+}
+
+/* 字体公共 */
+.ft24 {
+  font-size: 0.24rem;
+}
+
+.ft26 {
+  font-size: 0.26rem;
+}
+
+.ft28 {
+  font-size: 0.28rem;
+}
+
+.ft32 {
+  font-size: 0.32rem;
+}
+
+.ft40 {
+  font-size: 0.4rem;
+}
+
+#app .j-main {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  overflow: auto;
+  margin-top: -80px;
+  background: #fff;
+}
+
+#app .j-main .structured_top {
+  width: 100%;
+  /* height: 8rem; */
+  overflow: hidden;
+}
+
+#app .j-main .structured_top .str_title {
+  width: 100%;
+  margin-top: 1.44rem;
+}
+
+#app .j-main .structured_top .str_title img {
+  width: 100%;
+  height: 100%;
+}
+
+#app .j-main .structured_top .str_introduct {
+  margin-top: 0.08rem;
+  width: 100%;
+  height: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#app .j-main .structured_top .str_introduct .str_text {
+  font-size: 0.36rem;
+  font-weight: 400;
+  line-height: 0.5rem;
+  color: #fff;
+  font-family: PingFang SC;
+}
+
+#app .j-main .str_what {
+  padding: 0 0.22rem;
+}
+
+#app .j-main .str_what .str_content {
+  padding: 0 0.4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 16.56rem;
+  background: #fff;
+  border-radius: 0.24rem;
+  margin-top: -0.8rem;
+}
+
+#app .j-main .str_what .str_content .content_title .zhuangshi_left {
+  position: absolute;
+  left: -0.16rem;
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+#app .j-main .str_what .str_content .content_title .zhuangshi_right {
+  position: absolute;
+  right: -0.16rem;
+  bottom: 0;
+  width: 0.4rem;
+  height: 0.4rem;
+  transform: rotate(180deg);
+}
+
+/* 兼容app头部标题 */
+.jy-app-header.header-transparent .subreport_title {
+  font-size: 0.36rem;
+  color: #ffffff;
+}
+
+.jy-app-header.header-transparent .fanhui {
+  width: 0.96rem;
+  height: 0.96rem;
+  /*  font-size: 0.36rem;*/
+  color: #fff;
+  font-size: 19.5px;
+}
+
+/* 底部悬浮容器 */
+#app .j-button-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: 1.34rem;
+  /* padding: 0.16rem 0.32rem 0.16rem; */
+  background-color: transparent;
+  position: fixed;
+  bottom: 0.4rem;
+}
+
+/* 正常容器按钮 */
+#app .j-button-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: 1.5rem;
+}
+
+/* 大小标题title */
+#app .j_sysauth_group {
+  margin-top: 0.6rem;
+}
+
+#app .j_sysauth_txt {
+  text-align: center;
+}
+
+#app .j_sysauth_txt h1 {
+  font-size: 0.48rem;
+  color: #1d1d1d;
+  height: 0.67rem;
+  line-height: 0.67rem;
+}
+
+#app .j_sysauth_txt span {
+  font-size: 0.28rem;
+  color: #686868;
+  height: 0.35rem;
+  line-height: 0.35rem;
+}
+
+/* ISO 企业认证列表style */
+.iso_group_box {
+  overflow: hidden;
+  margin-top: 0.56rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.iso_group_box .iso_li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #1d1d1d;
+  margin-bottom: .40rem;
+}
+
+.iso_group_box .iso_li .bgs_img {
+  width: 3.08rem;
+  height: 4.36rem;
+  margin-bottom: 0.16rem;
+}
+
+.iso_group_box .iso_li .bgs_img_ness {
+  width: 3.28rem;
+  height: 2.30rem;
+  margin-bottom: 0.16rem;
+}
+
+.iso_group_box .iso_li .authnum,
+.iso_group_box .iso_li .authname {
+  height: 0.38rem;
+  line-height: 0.38rem;
+}
+
+.iso_group_box .iso_li .authname {
+  font-weight: 400;
+  color: #505050;
+}
+
+
+/* ==== */
+#app .j-button-group .j-button-cancel {
+  height: 0.8rem;
+  background: #edeff2;
+  color: #171826;
+}
+
+#app .j-button-group .j-button-cancel .phone_num {
+  font-size: 0.28rem;
+  color: #5f5e64;
+}
+
+#app .j-button-group .j-button-cancel .phone_icon {
+  margin-right: 0.16rem;
+  display: flex;
+  width: 0.32rem;
+  height: 0.32rem;
+  background: url('../image/phone.png');
+  background-size: 0.32rem 0.32rem;
+}
+
+#app .j-button-group .j-button-confirm {
+  height: 0.8rem;
+  background: #2abed1;
+  color: #fff;
+}
+
+#app .j-button-group .j-button-confirm,
+.j-button-consult {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 76%;
+  height: 0.88rem;
+  font-size: 0.32rem;
+  text-align: center;
+  border-radius: 0.45rem;
+  background: linear-gradient(90deg, #2394ff -2.53%, #0d4ae7 95.93%);
+  box-shadow: 0px 10px 16px rgba(8, 125, 223, 0.2);
+}
+
+/* tel */
+#app .j-button-group .j-button-confirm .j_telbox {
+  display: flex;
+  align-items: center;
+  margin: 0 0.63rem;
+}
+
+/*  */
+.j-button-consult {
+  justify-content: center;
+  width: 90%;
+  color: #fff;
+  font-size: 0.36rem;
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 400;
+
+  /* 设置渐变 */
+  background: linear-gradient(90deg, #2394ff -2.53%, #0d4ae7 95.93%);
+  /* 设置内阴影 */
+  box-shadow: 0px 10px 16px rgba(8, 125, 223, 0.2),
+    inset 1px 1px 1px rgba(255, 255, 255, 0.5);
+  border-radius: 0.16rem;
+}
+
+@keyframes ballRotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.ball-clip-rotate {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+}
+
+.ball-clip-rotate .ball {
+  display: inline-block;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  border-bottom-color: transparent;
+  background: 0 0;
+  -webkit-animation: ballRotate 0.75s 0s linear infinite;
+  animation: ballRotate 0.75s 0s linear infinite;
+}
+
+.image-viewer .viewer-wrapper {
+  position: relative;
+  z-index: 6;
+}
+
+.image-viewer .viewer {
+  transform: translate3d(0px, 4rem, 0px) !important;
+}
+
+.image-viewer .image-body .ball-clip-rotate {
+  z-index: 3;
+}
+
+.module {
+  /* margin-top: .32rem;
+  width: 100%;
+  padding: 0 .24rem; */
+}
+
+.module-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 0.24rem;
+}
+
+.buy-discount .module-content {
+  padding: 0.6rem 0;
+}
+
+.buy-discount .s-img {
+  display: block;
+  width: 100%;
+}
+
+.buy-discount .how-to-buy {
+  margin: 0 0.8rem;
+}
+
+.buy-discount .discount {
+  margin: 0.72rem auto 0.8rem;
+  width: 3.9rem;
+}
+
+.buy-discount .c-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.buy-discount .c-list-item:not(:last-of-type) {
+  margin-bottom: 0.32rem;
+}
+
+.buy-discount .c-list-item .c-l-item-text {
+  margin-left: 0.16rem;
+  line-height: 0.4rem;
+}
+
+.buy-discount .call-phone {
+  margin-top: 0.8rem;
+  display: flex;
+  padding: 0.16rem 0.48rem;
+  align-items: center;
+  border-radius: 37px;
+  color: #fff;
+  background: linear-gradient(180deg, #ffa51f, #f9781b 100%);
+}
+
+.buy-discount .icon-phone {
+  margin-right: 0.12rem;
+}
+
+.color-red {
+  color: #fb493e;
+}
+
+.icon_phone {
+  display: flex;
+  margin-right: 0.16rem;
+  width: 0.4rem;
+  height: 0.4rem;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjlJREFUWEfFlzGojmEUx3//MhgMBkoxMCgDdYtyBwNZFOUqg8F4R4W6hQxsrqQYlDKahTIqI8Igyh3uYCCUQTEY1NH/9n63977e933Od++r7yxffd//Oef3PM855zmfmLBpwvH5ByAi9gLbWsBeSvo6NPAKgIi4BlzsCPIbOCXp8ZAQywARsRt4V3D+A9gs6c9QEHWAGeBhwvFOSYsJXUpSB5gGnidWnZT0IKFLSeoAG4CfiVW3JJ1P6FKSZhJ+AHYVVn4CdgyVB02Ae8BsAt0AHxO6oqQJcBx4VFjlcnQl/Cp6TwiaAOuBL8DGnrVnJN1J+E5J2jph3zWck3Q75TkpagPYB7xqWe87dw8YrAk5RutjFBHPgIMtEHOSbiY3l5J1AewHXrR4cAJOS3qb8p4QdT7HEXEfON1xFYb4lvBflPQBbALcmPzZtNfAoSFKsXcgiYijwJOObRjihCR3xhUWEYbeAixK8rV1WnEiKswIrgw/Tm9GESLiMnAVWAd8rzbwFHDeLDSrKANgR36mj3VswzucB64DF6rgXTv2PDFbf02LAPYUEe6QhjjSc5o+je3FrAP3EfeTpbckBTAGRCL+kmRmNNqlASoIX4fnxrlspA7d6gBqieZX826V6athWRtAdRousxsdzaoEtXaA2mlMAVd8r6Wotd+HA2iAnHVfADxf9tkeSe/HqoLs7qqSPVz1jQOA/2/UbV7SpdEXY1VBFqKuiwifhgfdrcBnSW7hy/bfAUrQEwf4CykLqiFxGxFAAAAAAElFTkSuQmCC) no-repeat;
+  background-size: contain;
+}
+
+.txt_phone {
+  font-size: 0.4rem;
+  font-family: 'PingFang SC';
+  font-weight: 400;
+  padding-left: 3px;
+}

wx/templates/tripartiteAuth/sess/index.html

@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport"
+		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="format-detection" content="telephone=yes" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>电信行业解决方案</title>
+	<script src="https://wx.jianyu360.cn/structuredata/mobile/js/rem.js"></script>
+	<!-- <script src="/structuredata/mobile/js/rem.js"></script> -->
+	<!-- <link rel="stylesheet" href="{{Msg " seo" "cdn" }}/structuredata/mobile/css/base.css?v={{Msg "seo" "version" }}">
+	<link rel="stylesheet" href="{{Msg " seo" "cdn" }}/common-module/solution/css/solution.css?v={{Msg "seo" "version"
+		}}"> -->
+	<link rel="stylesheet" href="https://cdn-ali.jianyu360.com/structuredata/mobile/css/base.css?v=24356">
+	<link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css" />
+	<!-- <link rel="stylesheet" href="https://cdn-ali.jianyu360.com/common-module/solution/css/solution.css?v=24356"> -->
+	<link rel="stylesheet" href="../../../staticres/common-module/tripartiteAuth/css/tripartiteAuth.css?v=24356">
+</head>
+
+<body>
+	<div id="app">
+		<div class="j-main">
+			<div class="structured_top">
+				<div class="str_title">
+					<!-- <img src='{{Msg "seo" "cdn"}}/common-module/solution/image/A_02.jpg' alt=""> -->
+					<!-- <img src='https://cdn-ali.jianyu360.com/common-module/solution/image/A_02.jpg' alt=""> -->
+					<img src='../../../staticres/common-module/tripartiteAuth/image/A_02.jpg' alt="">
+
+				</div>
+			</div>
+			<div class="str_what question" style="margin-top: -.73rem;">
+				<img src='../../../staticres/common-module/tripartiteAuth/image/A_03.png' alt="">
+			</div>
+
+			<div class="j-button-box">
+				<!-- 立即咨询btn -->
+				<a class="j-button-consult" id="j_cancel">
+					<!-- <span class="phone_icon"></span> -->
+					<span>立即咨询</span>
+				</a>
+			</div>
+			<!-- 体系认证 -->
+			<div id="vueEl">
+				<div class="j_sysauth_group" v-for="item in sysAuth_dataMaps">
+					<div class="j_sysauth_txt">
+						<h1 v-text="item.bigtitle"></h1>
+						<span v-text="item.subtitle">品牌提升</span>
+					</div>
+
+					<!-- ISO\企业 认证 -->
+					<div class="iso_group_box">
+						<div class="iso_li" v-for="(itemImg,index) in item.ISO_imagesMaps">
+							<div :class="(item.bigtitle ==='体系认证'?'bgs_img':'bgs_img_ness')"><img
+									:src="`${IsoImgspath}${item.imgspath}_${index+1}.jpg`" alt="">
+							</div>
+							<div class="ft26 authnum" v-text="itemImg.authnum" v-if="itemImg.authnum"></div>
+							<div class="ft24 authname" v-text="itemImg.authname" v-if="itemImg.authname">质量认证</div>
+						</div>
+
+					</div>
+					<!-- 立即咨询btn -->
+					<div class="j-button-box">
+
+						<a class="j-button-consult" id="j_cancel">
+							<!-- <span class="phone_icon"></span> -->
+							<span>了解详情</span>
+						</a>
+					</div>
+				</div>
+			</div>
+			<!-- 优惠信息 -->
+			<div class="module buy-discount" style="margin-top: -1px;">
+				<img src='../../../staticres/common-module/tripartiteAuth/image/B_01.jpg' alt="">
+				<img src='../../../staticres/common-module/tripartiteAuth/image/B_02.jpg' alt=""
+					style="margin-top: -1px;">
+			</div>
+			<!-- 核心优势 -->
+			<div style="margin-top: -1px;">
+				<img src='../../../staticres/common-module/tripartiteAuth/image/B_03.jpg' alt="">
+			</div>
+			<!-- 已使用结构化招标数据的部分企业 -->
+			<div class="company">
+				<img src='../../../staticres/common-module/tripartiteAuth/image/B_04.jpg' alt="">
+
+			</div>
+			<!-- 更多定制化数据服务 -->
+			<div style="margin-top: -1px;">
+				<img src='../../../staticres/common-module/tripartiteAuth/image/B_05.jpg' alt="">
+				<img src='../../../staticres/common-module/tripartiteAuth/image/B_06.jpg'
+					style="height: 50px;width: 100%;margin-top: -1px;" alt="">
+			</div>
+		</div>
+		<div class="j-button-group">
+			<!-- <a class="j-button-cancel" id="j_cancel">
+				<span class="phone_icon"></span>
+				<span>了解详情</span>
+			</a> -->
+			<!-- 点击调取拨打电话 -->
+			<button class="j-button-confirm" onclick="location.href = 'tel:10086​'" id="j_confirm">
+				<span class="j_telbox">
+					<i class="icon_phone"></i>
+					<i class="txt_phone">15136295365</i>
+				</span>
+				<span>拨打</span>
+			</button>
+		</div>
+	</div>
+	<!-- {{include "/common/baiducc.html"}} -->
+	<script src='https://cdn-ali.jianyu360.com/public-pc/js/baiducc.js?v=24356'></script>
+</body>
+<script src="https://cdn-ali.jianyu360.com/structuredata/mobile/js/jquery.min.js"></script>
+<script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
+<script src="https://cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js"></script>
+<!-- <script src='{{Msg "seo" "cdn"}}/structuredata/mobile/js/jquery.min.js'></script>
+<script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
+<script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script> -->
+<script>
+	(function () {
+		var ad_from = getParam("adv_from");
+		if (ad_from != "") {
+			if (!localStorage.getItem("ad_from")) {
+				localStorage.setItem("ad_from", ad_from)
+				_hmt.push(['_trackEvent', '广告', 'click', ad_from]);
+			}
+		}
+	})()
+	function learn_more() {
+		window.location.href = '/weixin/frontPage/bigmember/free/perfect_info_solution?source=telecom_solution'
+	}
+	function getParam(name) {
+		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+		var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
+		var context = "";
+		if (r != null)
+			context = r[2];
+		reg = null;
+		r = null;
+		return context == null || context == "" || context == "undefined" ? "" : context;
+	}
+	$("#j_cancel").on('click', learn_more)
+	var vmSol = new Vue({
+		el: '#vueEl',
+		data: {
+			show: false,
+			index: 0,
+			images: [
+				'/common-module/solution/image/viewImg.png'
+			],
+			// ISO img队列
+			IsoImgspath: '../../../staticres/common-module/tripartiteAuth/image/',
+			sysAuth_dataMaps: [
+				// ISO
+				{
+					bigtitle: '体系认证',
+					subtitle: '品牌提升，投标加分，提升企业竞争力',
+					imgspath: 'ISO_img/ISOimg',
+					ISO_imagesMaps: [
+						{
+							// IsoImgs: '../../../staticres/common-module/tripartiteAuth/image/ISO_img/ISOimg',
+							id: 1,
+							authnum: 'ISO9001、GB/T50430',
+							authname: '质量管理体系认证',
+						},
+						{
+							id: 2,
+							authnum: 'ISO14001',
+							authname: '环境管理体系认证',
+						},
+						{
+							id: 3,
+							authnum: 'ISO45001',
+							authname: '职业健康安全管理体系认证',
+						},
+						{
+							id: 4,
+							authnum: 'HACCP',
+							authname: '危害分析和关键控制点',
+						},
+						{
+							id: 5,
+							authnum: 'ISO22000',
+							authname: '食品安全管理体系认证',
+						},
+						{
+							id: 6,
+							authnum: 'ISO20000',
+							authname: '信息技术服务管理体系认证',
+						},
+						{
+							id: 7,
+							authnum: 'ISO27000',
+							authname: '信息安全管理体系认证',
+						},
+						{
+							id: 8,
+							authnum: '更多体系认证服务',
+							authname: '更多认证点击了解详情',
+						}
+
+					]
+				},
+				// 企业认证图片
+				{
+					bigtitle: '信用认证',
+					subtitle: '企业信用名片，招投标必备',
+					imgspath: 'nessauth_img/nessimg',
+					ISO_imagesMaps: [
+						{
+							// IsoImgs: '../../../staticres/common-module/tripartiteAuth/image/ISO_img/ISOimg',
+							id: 1,
+							authnum: '企业信用等级证书',
+							authname: '',
+
+						},
+						{
+							id: 2,
+							authnum: '重合同守信用企业',
+							authname: '',
+						},
+						{
+							id: 3,
+							authnum: '质量服务诚信单位',
+							authname: '',
+						},
+						{
+							id: 4,
+							authnum: '重质量守信用单位 ',
+							authname: '',
+						},
+						{
+							id: 5,
+							authnum: '重服务守信用单位',
+							authname: '',
+						},
+						{
+							id: 6,
+							authnum: '诚信经营示范单位',
+							authname: '',
+						},
+						{
+							id: 7,
+							authnum: '资信等级',
+							authname: '',
+						},
+						{
+							id: 8,
+							authnum: '诚信企业家',
+							authname: '',
+						},
+						{
+							id: 9,
+							authnum: '诚信供应商',
+							authname: '',
+						}
+
+					]
+				}
+			],
+		},
+		methods: {
+			imageView: function (index) {
+				this.show = true
+			}
+		}
+	})
+</script>
+
+</html>