From ae761769d912882e6e0209bff5669c37b515f773 Mon Sep 17 00:00:00 2001 From: whycwx <1272078254@qq.com> Date: 星期五, 02 九月 2022 19:42:24 +0800 Subject: [PATCH] 产品中心 --- src/pages/home/home.vue | 41 ++++++++++++++++++++++++++--------------- 1 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue index 78ce87e..14ad83b 100644 --- a/src/pages/home/home.vue +++ b/src/pages/home/home.vue @@ -62,11 +62,11 @@ </div> </div> <div class="price_title"> - <span>钃勭數姹犵洃娴嬬鐞�</span> - <span>钃勭數姹犲閲忔祴璇�</span> - <span>钃勭數姹犲厖鏀剧數</span> - <span>钃勭數姹犲潎琛℃椿鍖�</span> - <span>钃勭數姹犲叾浠栧吇鎶�</span> + <span :class="{'select_span':selectXdc==1}">钃勭數姹犵洃娴嬬鐞�</span> + <span :class="{'select_span':selectXdc==2}">钃勭數姹犲閲忔祴璇�</span> + <span :class="{'select_span':selectXdc==3}" class="readonly">钃勭數姹犲厖鏀剧數</span> + <span :class="{'select_span':selectXdc==4}" class="readonly">钃勭數姹犲潎琛℃椿鍖�</span> + <span :class="{'select_span':selectXdc==5}" class="readonly">钃勭數姹犲叾浠栧吇鎶�</span> </div> <div class="product_list_box"> <div class="product_list"> @@ -122,7 +122,7 @@ <div class="solve_p"> <div class="solve_p_top1"> <h2>BTS鍒嗗竷寮忚搫鐢垫睜杩滅▼鏅鸿兘鐩戞祴杩愮淮绠$悊瑙e喅鏂规</h2> - <p>BTS鍒嗗竷寮忚搫鐢垫睜缁勮繙绋嬫櫤鑳借繍缁寸郴缁熷浜庣數姹犺繍缁寸鐞嗕汉鍛樺噯纭疄鏃舵帉鎻$數姹犵粍瀹归噺鍙婂悇鎸囨爣鍙傛暟锛屽噯纭鍒ょ數姹犵粍鐨勭画鑸兘鍔涗负鍋滅數璋冨害鍋氬嚭姝g‘渚濇嵁锛屽疄鐜颁簡浣胯搫鐢垫睜缁勪粠瀹氭湡浜哄伐妫�娴嬪悜瀹炴椂鑷姩鍦ㄧ嚎鍏绘姢宸ヤ綔鏂瑰紡鐨勮浆鍙橈紝浣胯繍缁翠汉鍛樻洿涓撴敞浜庡钃勭數姹犺繍琛岀姸鎬佺殑鎺屾帶锛屽疄鐜颁簡鏇村姞瀹炴椂鐨勮搫鐢垫睜涓诲姩绠$悊锛屽鐢垫簮绯荤粺瀹夊叏绋冲畾杩愯璧峰埌浜嗕繚闅滀綔鐢ㄣ��</p> + <p>FBS-9600钃勭數姹犵粍鍦ㄧ嚎鐩戞祴鍙婅繙绋嬭嚜鍔ㄨ繍缁磋В鍐虫柟妗� FBS-9600钃勭數姹犵粍鍦ㄧ嚎鐩戞帶鍙婅繙绋嬭嚜鍔ㄨ繍缁磋В鍐虫柟妗堜富瑕佷负鍙樼數绔欓厤鐢靛銆侀�氫俊灞�绔欍�佺綉缁滄満鎴裤�両DC鏁版嵁鏈烘埧銆乁PS鏈烘埧銆佽搫鐢垫睜缁勬満鎴跨瓑涓氬姟鍦烘櫙涓嬬殑钃勭數缁勭洃鎺ф彁渚涙ā鍧楀寲鐨勪骇鍝佸強瀹氬埗鍖栫殑瑙e喅鏂规锛屽疄鐜伴�氫俊澶囩敤鐢垫簮涓搫鐢垫睜缁勭殑鍏ㄥ湪绾挎棤浜哄�煎畧鏅鸿兘鍖栫洃鎺с�佽繙绋嬭嚜鍔ㄧ淮鎶ょ瓑鍔熻兘</p> </div> <div class="solve_p_top2"> <h2></h2> @@ -198,7 +198,7 @@ export default { data(){ return { - + selectXdc:1, } }, mounted() { @@ -214,7 +214,9 @@ width: 100%; height: 100%; } - + .select_span{ + color:#0c3e8c; + } .banner_box{ /deep/.el-carousel__container{ height: 402px; @@ -223,13 +225,13 @@ .select_list_box{ display: flex; justify-content: space-between; - padding:20px; + padding:20px 150px; .select_list{ width:20%; - .select_img{ - height:200px; - border: 14px solid #0c3e8c; + width: 293px; + height:174px; + border: 8px solid #0c3e8c; border-radius:0 60px; overflow: hidden; img{ @@ -238,11 +240,12 @@ } } h2{ + font-size: 28px; text-align: center; color:#30c3ce; } p{ - font-size: 16px; + font-size: 21px; color:#717071; } } @@ -256,16 +259,23 @@ .price_title{ display:flex; justify-content:space-between; - padding:5px 40px; + padding:5px 80px; background:#30c3ce; border-radius:100px; color:#FFFFFF; margin-bottom:40px; + span{ + cursor: pointer; + } + .readonly{ + color: #1f989b; + } } .product_list_box{ display:flex; justify-content:space-between; padding:0 30px; + padding-left: 75px; .list_right{ display: flex; justify-content:center; @@ -306,6 +316,7 @@ .title_box{ padding:20px 0 ; p{ + font-size: 40px; text-align: center; color: #231815; } @@ -320,7 +331,7 @@ background-color: #9e9e9f; } .title_lan{ - font-size: 14px; + font-size: 20px; color: #9e9e9f; } } -- Gitblit v1.9.1