|  |  | @@ -2,37 +2,37 @@ | 
		
	
		
			
			|  |  |  | <div class="page"> | 
		
	
		
			
			|  |  |  | <div class="commoditylIst"> | 
		
	
		
			
			|  |  |  | <div class="item" v-for="item in list" :key="item.title"> | 
		
	
		
			
			|  |  |  | <div class="line" :style="`background-color:${item.color} ;`"></div> | 
		
	
		
			
			|  |  |  | <div class="info"> | 
		
	
		
			
			|  |  |  | <!-- 商品信息 --> | 
		
	
		
			
			|  |  |  | <div class="content"> | 
		
	
		
			
			|  |  |  | <div class="title"> | 
		
	
		
			
			|  |  |  | <el-icon><i-ep-edit /></el-icon> | 
		
	
		
			
			|  |  |  | {{ item.title }} | 
		
	
		
			
			|  |  |  | <div @click="clickPayDialog(item)"> | 
		
	
		
			
			|  |  |  | <div class="line" :style="`background-color:${item.color} ;`"></div> | 
		
	
		
			
			|  |  |  | <div class="info"> | 
		
	
		
			
			|  |  |  | <!-- 商品信息 --> | 
		
	
		
			
			|  |  |  | <div class="content"> | 
		
	
		
			
			|  |  |  | <div class="title"> | 
		
	
		
			
			|  |  |  | <el-icon><i-ep-edit /></el-icon> | 
		
	
		
			
			|  |  |  | {{ item.title }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="money"> | 
		
	
		
			
			|  |  |  | <span class="price">{{ item.price }}元</span>/{{ | 
		
	
		
			
			|  |  |  | item.priceTime | 
		
	
		
			
			|  |  |  | }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="time"> | 
		
	
		
			
			|  |  |  | <span>{{ item.time }}</span | 
		
	
		
			
			|  |  |  | >分钟/月 | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="button" :style="`background-color:${item.color} ;`"> | 
		
	
		
			
			|  |  |  | 选择方案 | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="money"> | 
		
	
		
			
			|  |  |  | <span class="price">{{ item.price }}元</span>/{{ item.priceTime }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div class="time"> | 
		
	
		
			
			|  |  |  | <span>{{ item.time }}</span | 
		
	
		
			
			|  |  |  | >分钟/月 | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | @click="clickPayDialog(item)" | 
		
	
		
			
			|  |  |  | class="button" | 
		
	
		
			
			|  |  |  | :style="`background-color:${item.color} ;`" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | 选择方案 | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | <!-- 商品权益 --> | 
		
	
		
			
			|  |  |  | <div class="authority"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="authority-item" | 
		
	
		
			
			|  |  |  | v-for="items in item.authority" | 
		
	
		
			
			|  |  |  | :key="items" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <span>✔</span>{{ items }} | 
		
	
		
			
			|  |  |  | <!-- 商品权益 --> | 
		
	
		
			
			|  |  |  | <div class="authority"> | 
		
	
		
			
			|  |  |  | <div | 
		
	
		
			
			|  |  |  | class="authority-item" | 
		
	
		
			
			|  |  |  | v-for="items in item.authority" | 
		
	
		
			
			|  |  |  | :key="items" | 
		
	
		
			
			|  |  |  | > | 
		
	
		
			
			|  |  |  | <span>✔</span>{{ items }} | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
		
			
			|  |  |  | </div> | 
		
	
	
		
			
				|  |  | @@ -159,82 +159,103 @@ function clickPayDialog(item) { | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */ | 
		
	
		
			
			|  |  |  | // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */ | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .item { | 
		
	
		
			
			|  |  |  | width: 350px; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | margin-left: 50px; | 
		
	
		
			
			|  |  |  | background-color: #fffefd; | 
		
	
		
			
			|  |  |  | flex-shrink: 0; /* 防止缩小宽度 */ | 
		
	
		
			
			|  |  |  | border: 1px solid #c0bfbd; | 
		
	
		
			
			|  |  |  | border-radius: 20px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | .line { | 
		
	
		
			
			|  |  |  | height: 20px; | 
		
	
		
			
			|  |  |  | background-color: pink; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .info { | 
		
	
		
			
			|  |  |  | padding: 20px; | 
		
	
		
			
			|  |  |  | .content { | 
		
	
		
			
			|  |  |  | height: 300px; | 
		
	
		
			
			|  |  |  | .item { | 
		
	
		
			
			|  |  |  | width: 350px; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | margin-left: 50px; | 
		
	
		
			
			|  |  |  | background-color: #fffefd; | 
		
	
		
			
			|  |  |  | flex-shrink: 0; /* 防止缩小宽度 */ | 
		
	
		
			
			|  |  |  | border: 1px solid #c0bfbd; | 
		
	
		
			
			|  |  |  | border-radius: 20px; | 
		
	
		
			
			|  |  |  | overflow: hidden; | 
		
	
		
			
			|  |  |  | transition: all 0.3s; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | .line { | 
		
	
		
			
			|  |  |  | height: 20px; | 
		
	
		
			
			|  |  |  | background-color: pink; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .info { | 
		
	
		
			
			|  |  |  | padding: 20px; | 
		
	
		
			
			|  |  |  | border-bottom: 1px solid #c0bfbd; | 
		
	
		
			
			|  |  |  | .title { | 
		
	
		
			
			|  |  |  | font-size: 30px; | 
		
	
		
			
			|  |  |  | font-weight: 700; | 
		
	
		
			
			|  |  |  | line-height: 25px; | 
		
	
		
			
			|  |  |  | margin-bottom: 30px; | 
		
	
		
			
			|  |  |  | .el-icon { | 
		
	
		
			
			|  |  |  | line-height: 30px; | 
		
	
		
			
			|  |  |  | width: 40px; | 
		
	
		
			
			|  |  |  | height: 40px; | 
		
	
		
			
			|  |  |  | font-size: 40px; | 
		
	
		
			
			|  |  |  | color: #000; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | vertical-align: sub; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .money { | 
		
	
		
			
			|  |  |  | margin-bottom: 30px; | 
		
	
		
			
			|  |  |  | font-size: 20px; | 
		
	
		
			
			|  |  |  | color: #7c7c7a; | 
		
	
		
			
			|  |  |  | .price { | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | .content { | 
		
	
		
			
			|  |  |  | height: 300px; | 
		
	
		
			
			|  |  |  | padding: 20px; | 
		
	
		
			
			|  |  |  | border-bottom: 1px solid #c0bfbd; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | .title { | 
		
	
		
			
			|  |  |  | font-size: 30px; | 
		
	
		
			
			|  |  |  | font-weight: 700; | 
		
	
		
			
			|  |  |  | color: #242625; | 
		
	
		
			
			|  |  |  | line-height: 25px; | 
		
	
		
			
			|  |  |  | margin-bottom: 30px; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | .el-icon { | 
		
	
		
			
			|  |  |  | line-height: 30px; | 
		
	
		
			
			|  |  |  | width: 40px; | 
		
	
		
			
			|  |  |  | height: 40px; | 
		
	
		
			
			|  |  |  | font-size: 40px; | 
		
	
		
			
			|  |  |  | color: #000; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | vertical-align: sub; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .time { | 
		
	
		
			
			|  |  |  | margin-bottom: 30px; | 
		
	
		
			
			|  |  |  | font-size: 20px; | 
		
	
		
			
			|  |  |  | color: #7c7c7a; | 
		
	
		
			
			|  |  |  | span { | 
		
	
		
			
			|  |  |  | .money { | 
		
	
		
			
			|  |  |  | margin-bottom: 30px; | 
		
	
		
			
			|  |  |  | font-size: 20px; | 
		
	
		
			
			|  |  |  | color: #7c7c7a; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | .price { | 
		
	
		
			
			|  |  |  | font-size: 30px; | 
		
	
		
			
			|  |  |  | font-weight: 700; | 
		
	
		
			
			|  |  |  | color: #242625; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .time { | 
		
	
		
			
			|  |  |  | margin-bottom: 30px; | 
		
	
		
			
			|  |  |  | font-size: 20px; | 
		
	
		
			
			|  |  |  | color: #7c7c7a; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | span { | 
		
	
		
			
			|  |  |  | font-weight: 700; | 
		
	
		
			
			|  |  |  | color: #242625; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .button { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 40px; | 
		
	
		
			
			|  |  |  | border-radius: 10px; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | line-height: 40px; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | font-weight: 700; | 
		
	
		
			
			|  |  |  | color: #242625; | 
		
	
		
			
			|  |  |  | background-color: yellow; | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .button { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 40px; | 
		
	
		
			
			|  |  |  | border-radius: 10px; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | line-height: 40px; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | font-weight: 700; | 
		
	
		
			
			|  |  |  | background-color: yellow; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .authority { | 
		
	
		
			
			|  |  |  | &-item { | 
		
	
		
			
			|  |  |  | padding: 20px 10px; | 
		
	
		
			
			|  |  |  | span { | 
		
	
		
			
			|  |  |  | color: #7c7c7a; | 
		
	
		
			
			|  |  |  | margin-right: 30px; | 
		
	
		
			
			|  |  |  | .authority { | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | &-item { | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | padding: 20px 10px; | 
		
	
		
			
			|  |  |  | span { | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | color: #7c7c7a; | 
		
	
		
			
			|  |  |  | margin-right: 30px; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | &:hover { | 
		
	
		
			
			|  |  |  | cursor: pointer; | 
		
	
		
			
			|  |  |  | transform: translateY(-20px); | 
		
	
		
			
			|  |  |  | box-shadow: #00000026 2px 2px 2px 2px; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .commodityList::-webkit-scrollbar { | 
		
	
		
			
			|  |  |  | display: none; /* 隐藏滚动条(Safari、Chrome) */ | 
		
	
		
			
			|  |  |  | } | 
		
	
	
		
			
				|  |  | 
 |