Browse Source

产品服务样式调整

wangtao 3 months ago
parent
commit
67028eb28c
2 changed files with 18 additions and 15 deletions
  1. 17 14
      src/assets/styles/common/style.css
  2. 1 1
      src/views/services/index.vue

+ 17 - 14
src/assets/styles/common/style.css

@@ -4176,7 +4176,8 @@
             }
             
             .product-grid-section .content .img img {
-                width: 80%
+                width: 80%;
+                
             }
             
             .product-grid-section {
@@ -4223,11 +4224,11 @@
                 background: rgba(255, 255, 255, 0.18);
                 border: 1px solid rgba(255, 255, 255, 0.6);
                 color: #fff;
-                font-size: 20px;
-                font-weight: bold;
+                font-size: 18px;
+                /* font-weight: bold; */
                 /* padding: 20px 20px; */
-                height: 90px;
-                line-height: 90px;
+                height: 60px;
+                line-height: 60px;
                 display: inline-block;
                 margin: 0;
             }
@@ -4259,14 +4260,14 @@
             
             .product-grid-section ul a.active,
             .product-grid-section ul a:hover {
-                height: 110px;
-                line-height: 110px;
+                height: 80px;
+                line-height: 80px;
                 background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(50, 133, 216, 0.3));
                 border: 1px solid #43648B;
                 border-bottom: 0;
                 color: white;
                 cursor: pointer;
-                font-size: 24px;
+                font-size: 20px;
                 vertical-align: bottom;
             }
             
@@ -4315,14 +4316,15 @@
             @media (max-width: 575px) {
                 .product-grid-section ul a {
                     text-align: center;
-                    font-size: 15px;
-                    height: 40px;
-                    line-height: 40px
+                    font-size: 10px;
+                    height: 30px;
+                    line-height: 30px
                 }
                 .product-grid-section ul a.active,
                 .product-grid-section ul a:hover {
-                    height: 50px;
-                    line-height: 50px;
+                    height: 40px;
+                    line-height: 40px;
+                    font-size: 12px;
                 }
                 .product-grid-section ul a {
                     /* text-align: center;
@@ -6511,7 +6513,8 @@
             }
             
             .newItemOne .oneInnerBox .img {
-                /* max-height: 160px */
+                max-height: 200px;
+                overflow: hidden;
             }
             
             .newItemOne .oneInnerBox .img {

+ 1 - 1
src/views/services/index.vue

@@ -129,7 +129,7 @@ export default defineComponent({
             <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
                 <ul class="cannot_selected tabs_selected" >
                     <a v-for="(item,index) in store.state.columnTypes"  :class="item.id == store.state.acitveId ? 'active' : ''"
-                    v-on:mouseover="facilityClick(item)" :style="{'width':(1/store.state.columnTypes.length*100)+'%' }" :key="index">{{item.categoryName}}</a>
+                    v-on:click="facilityClick(item),store.state.acitveId = item.id" :style="{'width':(1/store.state.columnTypes.length*100)+'%' }" :key="index">{{item.categoryName}}</a>
                 </ul>
             </section>
         </section>