add

public/static/css/member.css

@@ -0,0 +1,438 @@
+body {
+	color: #515a6e;
+	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, Arial, sans-serif;
+}
+
+p {
+	margin: 0;
+}
+
+.v-title{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #4c4c50;
+    color: #fabf64;
+    width: 150px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-weight: 600;
+    border-top-left-radius: 10px;
+    border-top-right-radius:10px;
+}
+
+/* 会员中心 */
+.vip-model {
+	display: flex;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	font-size: 14px;
+	position: relative;
+	margin-top: 10px;
+	padding-top: 20px;
+}
+
+.v-left {
+	width: 320px;
+	border-right: 1px solid #f8f8f8;
+	padding: 0 20px;
+}
+
+.v-left .v-name {
+	font-size: 16px;
+	font-weight: 600;
+	margin-bottom: 10px;
+}
+
+.v-left .v-logo {
+	width: 100px;
+	height: 100px;
+	border-radius: 100px;
+	border: 1px solid #ddd;
+}
+
+.v-left .vip-interest {
+	margin: 20px 0;
+	line-height: 2.8;
+}
+
+.v-left .vip-title {
+	font-size: 24px;
+	font-weight: 600;
+	color: #ed4014;
+}
+
+.v-right {
+	flex: 1;
+	padding: 0 16px;
+}
+
+.vip-list {
+	display: flex;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+}
+
+.vip-list .vip-item {
+	width: 150px;
+	font-weight: 600;
+	border-radius: 10px;
+	text-align: center;
+	padding-bottom: 10px;
+	cursor: pointer;
+	margin-bottom: 12px;
+	position: relative;
+	box-shadow: 1px 1px 2px #ddd, -1px -1px 2px #ddd;
+}
+
+.vip-list .vip-item.active {
+	color: #4c4c50;
+	background: linear-gradient(to bottom, #fabf6440, #fabf64);
+}
+
+.vip-list .vip-item.active .vip-red {
+	color: #4c4c50;
+}
+
+.vip-list .vip-name {
+	font-size: 16px;
+	padding: 10px 0;
+}
+
+.vip-list .vip-price {
+	font-size: 14px;
+	margin-bottom: 15px;
+}
+
+.vip-list .vip-market-price {
+	margin-left: 10px;
+	text-decoration: line-through;
+	opacity: 0.8;
+}
+
+.vip-list .price-value {
+	font-size: 26px;
+	font-weight: 600;
+	margin-left: 3px;
+}
+
+.vip-list .vip-desc {
+	color: #999;
+	font-size: 12px;
+}
+
+.vip-list .vip-red {
+	color: #e12424;
+	font-weight: 600;
+}
+
+
+.vip-tips {
+	color: #999;
+	font-size: 12px;
+	margin: 10px 0;
+	text-align: center;
+	position: relative;
+}
+
+.vip-tips::before {
+	content: '';
+	position: absolute;
+	width: 25%;
+	height: 1px;
+	top: 0;
+	bottom: 0;
+	left: 5%;
+	margin: auto;
+	background-color: #f8f8f8;
+}
+
+.vip-tips::after {
+	content: '';
+	position: absolute;
+	width: 25%;
+	height: 1px;
+	top: 0;
+	bottom: 0;
+	right: 5%;
+	margin: auto;
+	background-color: #f8f8f8;
+}
+
+.pay-line .pay-icon {
+	width: 25px;
+	height: 25px;
+}
+
+.pay-tips {
+	color: #e12424;
+	font-weight: 600;
+	font-size: 12px;
+	margin-top: 15px;
+}
+
+.pay-item {
+	border: 1px solid #ddd;
+	padding: 0 15px;
+	border-radius: 5px;
+	cursor: pointer;
+	height: 35px;
+	margin-right: 15px;
+}
+
+.pay-item .iconfont {
+	margin-right: 5px;
+}
+
+.pay-item .icon-zhifubaozhifu {
+	color: #027AFF;
+}
+
+.pay-item .icon-weixinzhifu {
+	color: #62b900;
+}
+
+.pay-cont {
+	padding: 10px;
+	display: flex;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+}
+
+.pay-cont .pay-img {
+	width: 150px;
+	height: 150px;
+	background-color: #eee;
+	position: relative;
+}
+
+.pay-cont .pay-desc {
+	padding-left: 20px;
+	line-height: 2.2;
+	font-size: 14px;
+}
+
+.pay-cont .iconfont {
+	vertical-align: middle;
+	font-size: 16px;
+	margin: 0 5px 0 10px;
+}
+
+.iconfont {
+	vertical-align: middle;
+}
+
+.dis-agreement {
+	display: none;
+	text-align: center;
+	height: 170px;
+	line-height: 170px;
+	font-size: 18px;
+	font-weight: 600;
+	color: #ed4014;
+}
+
+.pay-agreement {
+	margin-top: 15px;
+}
+
+.pay-agreement span {
+	font-size: 12px;
+	color: #999;
+	margin: 0 !important;
+}
+
+.agreement-txt {
+	cursor: pointer;
+
+}
+
+.agreement-txt:hover {
+	color: #ed4014;
+}
+
+.money-color {
+	color: #ed4014;
+	font-size: 30px;
+	font-weight: 600;
+	margin-left: 2px;
+}
+
+.vip-banner {
+	background-color: #eee;
+	height: 60px;
+	width: 100%;
+	margin-bottom: 15px;
+}
+
+.font-12 {
+	font-size: 12px !important;
+}
+
+.font-13 {
+	font-size: 13px !important;
+}
+
+.open-member {
+	width: 100px;
+	height: 24px;
+	border-radius: 24px;
+	vertical-align: middle;
+	cursor: pointer;
+	margin-right: 10px;
+}
+
+.vip-top {
+	height: 70px;
+	background: url('/static/logo/v-topbg.png') no-repeat center center;
+	margin: 0 0 16px 0;
+	display: flex;
+	flex-wrap: nowrap;
+	justify-content: flex-end;
+	padding: 10px 40px;
+	color: #333;
+	position: relative;
+}
+
+.vip-top .vt-logo {
+	width: 50px;
+	height: 50px;
+	border-radius: 50px;
+	border: 1px solid #eee;
+	margin-right: 10px;
+}
+
+.vip-top .vt-name {
+	font-size: 16px;
+	font-weight: 600;
+	padding-top: 5px;
+	margin: 0;
+}
+
+.il-vip {
+	text-align: center;
+}
+
+.il-vip img {
+	width: 40px;
+	height: 40px;
+}
+
+.il-interest {
+	margin-top: 10px;
+	line-height: 4;
+	text-align: left;
+	font-size: 14px;
+	font-weight: 600;
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.il-interest .il-item {
+	width: 50%;
+}
+
+.il-interest .il-item img {
+	width: 35px;
+	height: 35px;
+}
+
+.member-model {
+	line-height: 1.8;
+	padding: 10px;
+	display: none;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 3;
+	background-color: #fff;
+}
+
+.member-model .member-btn {
+	text-align: right;
+	margin-top: 20px;
+}
+
+.agreement-content {
+	height: 557px;
+	overflow: auto;
+	text-indent: 2em;
+}
+
+.agreement-content .font-600 {
+	font-weight: 600;
+	font-size: 18px;
+}
+
+.member-btn button {
+	background-color: #fff;
+	border: 1px solid transparent;
+	border-color: #dcdee2;
+	font-size: 14px;
+	border-radius: 4px;
+	padding: 0 15px;
+	height: 32px;
+	color: #515a6e;
+}
+
+.member-btn button:hover {
+	border-color: #2d8cf0;
+	color: #2d8cf0;
+}
+
+.i-cost {
+	position: absolute;
+	width: 30px;
+	top: -10px;
+	left: 5px;
+}
+
+.coupon-modal {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	background: #ed4014;
+	padding: 20px;
+	z-index: 2;
+	font-size: 12px;
+	color: #999;
+	border-radius: 10px;
+	display: none;
+}
+
+.coupon-bg {
+	background: #fff;
+	border-radius: 10px;
+	padding: 10px 20px;
+}
+
+.coupon-price {
+	color: #ed4014;
+	font-size: 26px;
+	font-weight: 600;
+}
+
+.coupon-desc {
+	font-size: 14px;
+}
+
+.coupon-tips {
+	border-top: 1px dashed #ddd;
+	margin-top: 10px;
+	padding-top: 10px;
+	font-size: 12px;
+}
+
+.coupon-close {
+	position: absolute;
+	left: 0px;
+	top: 0;
+	line-height: 1;
+	color: #fff;
+	font-size: 30px;
+	transform: rotateZ(45deg);
+	cursor: pointer;
+}

resources/views/home/soft/electron/buy.blade.php

@@ -2,396 +2,6 @@
 <html>
 <head>
     @include('home.soft.common.head')
-    <link rel="stylesheet" href="/static/logo/font/iconfont.css">
-    <style>
-        body{
-            color: #515a6e;
-            font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
-        }
-        p{
-            margin: 0;
-        }
-        /* 会员中心 */
-        .vip-model {
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: flex-start;
-            font-size: 14px;
-        }
-
-        .v-left {
-            width: 160px;
-            border-right: 1px solid #ddd;
-            text-align: center;
-        }
-
-        .v-left .v-name {
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 10px;
-        }
-
-        .v-left .v-logo {
-            width: 100px;
-            height: 100px;
-            border-radius: 100px;
-            border: 1px solid #ddd;
-        }
-
-        .v-left .vip-interest {
-            margin: 20px 0;
-            line-height: 2.8;
-        }
-
-        .v-left .vip-title {
-            font-size: 24px;
-            font-weight: 600;
-            color: #ed4014;
-        }
-
-        .v-right {
-            flex: 1;
-            padding: 0 16px;
-        }
-
-        .vip-list {
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: space-between;
-        }
-
-        .vip-list .vip-item {
-            width: 130px;
-            border: 1px solid #ddd;
-            border-radius: 10px;
-            text-align: center;
-            padding-bottom: 10px;
-            cursor: pointer;
-            margin-bottom: 12px;
-            position: relative;
-        }
-
-        .vip-list .vip-item.active{
-            color: #fabf64;
-            background-color: #4c4c50;
-        }
-
-        .vip-list .vip-item.active .vip-red{
-            color: #fabf64;
-        }
-
-        .vip-list .vip-name {
-            font-size: 16px;
-            padding: 10px 0;
-        }
-
-        .vip-list .vip-price {
-            font-size: 14px;
-	        margin-bottom: 15px;
-        }
-
-        .vip-list .vip-market-price {
-            margin-left: 10px;
-            text-decoration: line-through;
-            opacity: 0.8;
-        }
-
-        .vip-list .price-value {
-            font-size: 26px;
-            font-weight: 600;
-            margin-left: 3px;
-        }
-
-        .vip-list .vip-desc {
-            color: #999;
-            font-size: 12px;
-        }
-
-        .vip-list .vip-red {
-            color: #e12424;
-            font-weight: 600;
-        }
-
-
-        .vip-tips {
-            color: #999;
-            font-size: 12px;
-            margin-bottom: 12px;
-        }
-
-        .pay-line, .pay-type {
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: flex-start;
-            line-height: 35px;
-        }
-
-
-        .pay-item {
-            border: 1px solid #ddd;
-            padding: 0 15px;
-            border-radius: 5px;
-            cursor: pointer;
-            height: 35px;
-            margin-right: 15px;
-        }
-
-        .pay-type .active {
-            border: 1px solid #e12424;
-            color: #e12424;
-        }
-
-        .pay-item .iconfont {
-            margin-right: 5px;
-        }
-
-        .pay-item .icon-zhifubaozhifu {
-            color: #027AFF;
-        }
-
-        .pay-item .icon-weixinzhifu {
-            color: #62b900;
-        }
-
-        .pay-cont {
-            padding: 10px 0;
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: flex-start;
-        }
-
-        .pay-cont .pay-img {
-            width: 150px;
-            height: 150px;
-            background-color: #eee;
-            position: relative;
-        }
-
-        .pay-cont .pay-desc {
-            padding: 20px;
-            line-height: 2.2;
-            font-size: 14px;
-
-        }
-
-        .pay-cont .iconfont {
-            vertical-align: middle;
-            font-size: 16px;
-            margin: 0 5px 0 10px;
-        }
-
-        .iconfont {
-            vertical-align: middle;
-        }
-
-        .dis-agreement {
-            display: none;
-            text-align: center;
-            height: 140px;
-            line-height: 140px;
-            font-size: 18px;
-            font-weight: 600;
-            color: #ed4014;
-        }
-
-        .pay-agreement span {
-            font-size: 12px;
-            color: #999;
-            margin: 0 !important;
-        }
-
-        .agreement-txt {
-            cursor: pointer;
-
-        }
-
-        .agreement-txt:hover {
-            color: #ed4014;
-        }
-
-        .money-color {
-            color: #ed4014;
-            font-size: 22px;
-            font-weight: 600;
-        }
-
-        .vip-banner {
-            background-color: #eee;
-            height: 60px;
-            width: 100%;
-            margin-bottom: 15px;
-        }
-
-        .font-12{
-            font-size: 12px !important;
-        }
-        .font-13{
-            font-size: 13px !important;
-        }
-        .open-member{
-            width: 100px;
-            height: 24px;
-            border-radius: 24px;
-            vertical-align: middle;
-            cursor: pointer;
-            margin-right: 10px;
-        }
-        .vip-top{
-            height: 80px;
-            background: url('/static/logo/v-topbg.png') no-repeat center center;
-            margin: 0 0 16px 0;
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: flex-start;
-            padding: 15px 40px;
-            color: #f8f8f8;
-        }
-
-        .vip-top .vt-logo{
-            width: 50px;
-            height: 50px;
-            border-radius: 50px;
-            border: 1px solid #eee;
-            margin-right: 15px;
-        }
-        .vip-top .vt-name{
-            font-size: 16px;
-            font-weight: 600;
-            padding-top: 5px;
-            margin: 0;
-        }
-
-        .il-vip{
-            width: 95px;
-            height: 30px;
-            margin-top: 40px;
-            margin-bottom: 10px;
-        }
-        .il-interest{
-            margin-top: 60px;
-            line-height: 2.5;
-            padding-left: 50px;
-            text-align: left;
-            font-size: 13px;
-            position: relative;
-        }
-        .il-interest:before{
-            position: absolute;
-            content: '';
-            top: -45px;
-            width: 80%;
-            height: 1px;
-            background-color: #dedede;
-            left: 0;
-            right: 0;
-            margin: auto;
-        }
-        .i-cost{
-            position: absolute;
-            width: 60px;
-            top: -7px;
-            right: 0;
-        }
-
-        .member-model {
-            line-height: 1.8;
-            padding: 10px;
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 0;
-            z-index: 3;
-            background-color: #fff;
-        }
-
-        .member-model .member-btn {
-            text-align: right;
-            margin-top: 20px;
-        }
-
-        .agreement-content{
-            height: 557px;
-            overflow: auto;
-            text-indent: 2em;
-        }
-
-        .agreement-content .font-600{
-            font-weight: 600;
-            font-size: 18px;
-        }
-
-        .member-btn button{
-            background-color: #fff;
-            border: 1px solid transparent;
-            border-color: #dcdee2;
-            font-size: 14px;
-            border-radius: 4px;
-            padding: 0 15px;
-            height: 32px;
-            color: #515a6e;
-        }
-
-        .member-btn button:hover{
-            border-color: #2d8cf0;
-            color: #2d8cf0;
-        }
-
-        .i-cost{
-            position: absolute;
-            width: 60px;
-            top: -7px;
-            right: 0;
-        }
-
-        .coupon-modal{
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            background: #ed4014;
-            padding: 20px;
-            z-index: 2;
-            font-size: 12px;
-            color: #999;
-            border-radius: 10px;
-            display: none;
-        }
-
-        .coupon-bg{
-            background: #fff;
-            border-radius: 10px;
-            padding: 10px 20px;
-        }
-
-        .coupon-price{
-            color: #ed4014;
-            font-size: 26px;
-            font-weight: 600;
-        }
-
-        .coupon-desc{
-            font-size: 14px;
-        }
-
-        .coupon-tips{
-            border-top: 1px dashed #ddd;
-            margin-top: 10px;
-            padding-top: 10px;
-            font-size: 12px;
-        }
-
-        .coupon-close{
-            position: absolute;
-            left: 0px;
-            top: 0;
-            line-height: 1;
-            color: #fff;
-            font-size: 30px;
-            transform: rotateZ(45deg);
-            cursor: pointer;
-        }
-
-
-    </style>
 </head>
 <body>
 <div class="vip-top">
@@ -407,156 +17,165 @@
             <span>非VIP会员</span>
         @endif
     </div>
+    <div class="v-title">VIP套餐</div>
 </div>
-<div class="vip-model">
-    <div class="v-left">
-        <img src="/static/logo/i-vip.png" class="il-vip" />
-        <p class="v-name">会员尊享</p>
-        <p>多项特权开通即享</p>
-        <ul class="il-interest">
-            <li>没有官方水印</li>
-            <li>不限功能使用</li>
-            <li>不限电脑设备</li>
-            <li>永久免费升级</li>
-            <li>专业技术支持</li>
-        </ul>
-    </div>
-    <div class="v-right">
-        @if(isset($ad) && $ad->logo)
-            <div class="vip-banner">
-                <img src="{{$ad->logo}}" style="width: 100%; height: 100%;"/>
+
+<div class="v-right">
+    @if(isset($ad) && $ad->logo)
+        <div class="vip-banner">
+            <img src="{{$ad->logo}}" style="width: 100%; height: 100%;"/>
+        </div>
+    @endif
+
+    <div class="vip-list">
+        @if($productInfo && $productInfo->price4)
+            <div id="vip_item4" class="vip-item active" onclick="selectTerm(4,{{ $productInfo->price4 }})">
+                <img src="/static/logo/i-cost.png" class="i-cost" />
+                <div class="vip-name">永久</div>
+                <div>
+                    <p class="vip-price">
+                        ¥<span class="price-value" id="permanentPrice">{{ floatval($productInfo->price4) + 10 }}</span>
+                        @if($productInfo->market_price4)
+                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price4) }}</span>
+                        @endif
+                    </p>
+                    <p class="vip-desc vip-red">
+                        {{ $productInfo->desc_price4 ?: "超划算，热销中" }}
+                    </p>
+                </div>
             </div>
         @endif
 
-        <div class="vip-list">
-            @if($productInfo && $productInfo->price4)
-                <div id="vip_item4" class="vip-item active" onclick="selectTerm(4,{{ $productInfo->price4 }})">
-                    <img src="/static/logo/i-cost.png" class="i-cost" />
-                    <div class="vip-name">永久</div>
-                    <div>
-                        <p class="vip-price">
-                            ¥<span class="price-value" id="permanentPrice">{{ floatval($productInfo->price4) + 10 }}</span>
-                            @if($productInfo->market_price4)
-                                <span class="vip-market-price">¥{{ floatval($productInfo->market_price4) }}</span>
-                            @endif
-                        </p>
-                        <p class="vip-desc vip-red">
-                            {{ $productInfo->desc_price4 ?: "超划算，热销中" }}
-                        </p>
-                    </div>
-                </div>
-            @endif
-
-            @if($productInfo->price1)
-                <div id="vip_item1" class="vip-item" onclick="selectTerm(1,{{ $productInfo->price1 }})">
-                    <img src="/static/logo/i-cost.png" class="i-cost" />
-                    <div class="vip-name">一个月</div>
-                    <div>
-                        <p class="vip-price">
-                            ¥<span class="price-value">{{ floatval($productInfo->price1) }}</span>
-                            @if($productInfo->market_price1)
-                                <span class="vip-market-price">¥{{ floatval($productInfo->market_price1) }}</span>
-                            @endif
-                        </p>
-                        <p class="vip-desc vip-red">
-                            {{ $productInfo->desc_price1 ?: "有效期一个月" }}
-                        </p>
-                    </div>
+        @if($productInfo->price1)
+            <div id="vip_item1" class="vip-item" onclick="selectTerm(1,{{ $productInfo->price1 }})">
+                <img src="/static/logo/i-cost.png" class="i-cost" />
+                <div class="vip-name">一个月</div>
+                <div>
+                    <p class="vip-price">
+                        ¥<span class="price-value">{{ floatval($productInfo->price1) }}</span>
+                        @if($productInfo->market_price1)
+                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price1) }}</span>
+                        @endif
+                    </p>
+                    <p class="vip-desc vip-red">
+                        {{ $productInfo->desc_price1 ?: "有效期一个月" }}
+                    </p>
                 </div>
-            @endif
-
-            @if($productInfo->price2)
-                <div id="vip_item2" class="vip-item" onclick="selectTerm(2,{{ $productInfo->price2 }})">
-                    <img src="/static/logo/i-sale.png" class="i-cost" />
-                    <div class="vip-name">半年</div>
-                    <div>
-                        <p class="vip-price">
-                            ¥<span class="price-value">{{ floatval($productInfo->price2) }}</span>
-                            @if($productInfo->market_price2)
-                                <span class="vip-market-price">¥{{ floatval($productInfo->market_price2) }}</span>
-                            @endif
-                        </p>
-                        <p class="vip-desc">
-                            {{ $productInfo->desc_price2 ?: "有效期半年" }}
-                        </p>
-                    </div>
+            </div>
+        @endif
+
+        @if($productInfo->price2)
+            <div id="vip_item2" class="vip-item" onclick="selectTerm(2,{{ $productInfo->price2 }})">
+                <img src="/static/logo/i-sale.png" class="i-cost" />
+                <div class="vip-name">半年</div>
+                <div>
+                    <p class="vip-price">
+                        ¥<span class="price-value">{{ floatval($productInfo->price2) }}</span>
+                        @if($productInfo->market_price2)
+                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price2) }}</span>
+                        @endif
+                    </p>
+                    <p class="vip-desc">
+                        {{ $productInfo->desc_price2 ?: "有效期半年" }}
+                    </p>
                 </div>
-            @endif
-
-            @if($productInfo->price3)
-                <div id="vip_item3" class="vip-item" onclick="selectTerm(3,{{ $productInfo->price3 }})">
-                    <img src="/static/logo/i-sale.png" class="i-cost" />
-                    <div class="vip-name">一年</div>
-                    <div>
-                        <p class="vip-price">
-                            ¥<span class="price-value">{{ floatval($productInfo->price3) }}</span>
-                            @if($productInfo->market_price3)
-                                <span class="vip-market-price">¥{{ floatval($productInfo->market_price3) }}</span>
-                            @endif
-                        </p>
-                        <p class="vip-desc">
-                            {{ $productInfo->desc_price3 ?: "有效期一年" }}
-                        </p>
-                    </div>
+            </div>
+        @endif
+
+        @if($productInfo->price3)
+            <div id="vip_item3" class="vip-item" onclick="selectTerm(3,{{ $productInfo->price3 }})">
+                <img src="/static/logo/i-sale.png" class="i-cost" />
+                <div class="vip-name">一年</div>
+                <div>
+                    <p class="vip-price">
+                        ¥<span class="price-value">{{ floatval($productInfo->price3) }}</span>
+                        @if($productInfo->market_price3)
+                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price3) }}</span>
+                        @endif
+                    </p>
+                    <p class="vip-desc">
+                        {{ $productInfo->desc_price3 ?: "有效期一年" }}
+                    </p>
                 </div>
-            @endif
-
-            <!-- @if($productInfo->price5)
-                <div id="vip_item5" class="vip-item" onclick="selectTerm(5,{{ $productInfo->price5 }})">
-                    <div class="vip-name">7天会员</div>
-                    <div>
-                        <p class="vip-price">
-                            ¥<span class="price-value">{{ $productInfo->price5 }}</span>
-                        </p>
-                        <p class="vip-desc">
-                            {{ $productInfo->desc_price5 ?: "限时特价" }}
-                        </p>
-                    </div>
+            </div>
+        @endif
+
+        <!-- @if($productInfo->price5)
+            <div id="vip_item5" class="vip-item" onclick="selectTerm(5,{{ $productInfo->price5 }})">
+                <div class="vip-name">7天会员</div>
+                <div>
+                    <p class="vip-price">
+                        ¥<span class="price-value">{{ $productInfo->price5 }}</span>
+                    </p>
+                    <p class="vip-desc">
+                        {{ $productInfo->desc_price5 ?: "限时特价" }}
+                    </p>
                 </div>
-            @endif -->
+            </div>
+        @endif -->
+    </div>
+</div>
+<p class="vip-tips">温馨提示：会员到期后将直接转为非VIP会员</p>
+<div class="vip-model">
+    <div class="v-left">
+        <div class="il-vip">
+            <img src="/static/logo/i-vip.png">
+            <span class="v-name">会员尊享</span>
         </div>
-        <p class="vip-tips">温馨提示：VIP会员到期后将直接转为非VIP会员</p>
-        <p class="pay-line">
-            支付金额：<span id="payMoney" class="money-color">0</span>元
-        </p>
-        <div class="pay-line">
-            <p>支付方式：</p>
-            <div class="pay-type">
-                <div id="payWechat" class="pay-item active" onclick="selectPaytype('wechat')">
-                    <span class="iconfont icon-weixinzhifu"></span>微信支付
-                </div>
-                <div id="payAlipay" class="pay-item" onclick="selectPaytype('alipay')">
-                    <span class="iconfont icon-zhifubaozhifu"></span>支付宝支付
-                </div>
+
+        <div class="il-interest">
+            <div class="il-item">
+                <img src="/static/logo/a-equity1.png">
+                <span>不限文件大小</span>
             </div>
-            <div class="pay-agreement">
-                <label>
-                    <input type="checkbox" checked id="payCheck" onclick="checkPayBox(this)"/>
-                </label>
-                <span>同意并接受</span>
-                <span class="agreement-txt" onclick="agreementModel(true)">《软件会员增值服务协议》</span>
+            <div class="il-item">
+                <img src="/static/logo/a-equity2.png">
+                <span>不限电脑设备</span>
+            </div>
+            <div class="il-item">
+                <img src="/static/logo/a-equity3.png">
+                <span>一键批量转换</span>
+            </div>
+            <div class="il-item">
+                <img src="/static/logo/a-equity4.png">
+                <span>本地安全处理</span>
+            </div>
+            <div class="il-item">
+                <img src="/static/logo/a-equity5.png">
+                <span>软件免费升级</span>
+            </div>
+            <div class="il-item">
+                <img src="/static/logo/a-equity6.png">
+                <span>专业技术支持</span>
             </div>
         </div>
-
+    </div>
+    <div class="v-right">
         <div id="dis-agreement1" class="pay-cont">
             <div class="spinner-border m-5" role="status" id="spinnerShow">
                 <span class="visually-hidden">Loading...</span>
             </div>
             <div id="qrcode" class="pay-img" style="display: none"></div>
             <div class="pay-desc">
-                <div>
-                    <span class="iconfont icon-saoma1"></span> 请打开微信/支付宝扫一扫
-                </div>
-                <div>
-                    <span class="iconfont icon-erweima1"></span> 扫描左侧二维码
-                </div>
-                <div>
-                    <span class="iconfont icon-wancheng1"></span> 请完成支付
-                </div>
+                <p class="pay-line">
+					支付金额：<span style="color: #ed4014;">¥</span><span id="payMoney" class="money-color">88</span>
+				</p>
+				<p class="pay-line">
+					支付方式：
+					<img src="./aaa_files/icon/p-weixin.png" class="pay-icon"/>
+					<img src="./aaa_files/icon/p-alipay.png" class="pay-icon"/>
+				</p>
+				<p class="pay-tips">不支持无理由退款,请先试用</p>
             </div>
         </div>
-
         <div id="dis-agreement2" class="dis-agreement">请同意服务协议后方可购买产品</div>
+        <div class="pay-agreement">
+            <label>
+                <input type="checkbox" checked="" id="payCheck" onclick="checkPayBox(this)">
+            </label>
+            <span>同意并接受</span>
+            <span class="agreement-txt" onclick="agreementModel(true)">《软件会员增值服务协议》</span>
+        </div>
     </div>
 </div>