行业应用页

src/views/componentServices/list.vue

 <template>
 <template>
-  <div class="app-container">
+  <div class="app-container custom-main-w ">
     <div style="margin: 0 auto;padding: 0 84px;'">
     <div style="margin: 0 auto;padding: 0 84px;'">
-<!--      内容过滤器-->
-<!--      <el-tabs v-model="tabActive" @tab-change="tabChange">-->
-<!--        <el-tab-pane-->
-<!--            v-for="i in assemblyTypes"-->
-<!--            :key="i.value"-->
-<!--            :label="i.name"-->
-<!--            :name="i.value">-->
-<!--        </el-tab-pane>-->
-<!--      </el-tabs>-->
+      <!--      内容过滤器-->
+      <!--      <el-tabs v-model="tabActive" @tab-change="tabChange">-->
+      <!--        <el-tab-pane-->
+      <!--            v-for="i in assemblyTypes"-->
+      <!--            :key="i.value"-->
+      <!--            :label="i.name"-->
+      <!--            :name="i.value">-->
+      <!--        </el-tab-pane>-->
+      <!--      </el-tabs>-->
 
 
       <el-row :gutter="24">
       <el-row :gutter="24">
         <el-col v-for="(item,index) in assemblyData" :key="item.id" :span="6">
         <el-col v-for="(item,index) in assemblyData" :key="item.id" :span="6">
           <div class="item flex">
           <div class="item flex">
-            <img :src="item.image" alt="">
+            <img :src="item.image" alt=""/>
             <div>
             <div>
               <div class="title">{{ item.title }}</div>
               <div class="title">{{ item.title }}</div>
               <p>{{ item.description }}</p>
               <p>{{ item.description }}</p>
 
 
-              <el-button type="primary" link @click="openPage(item,index)">查看详情
-                <el-icon>
-                  <ArrowRight/>
-                </el-icon>
-              </el-button>
+              <el-button round @click="openPage(item,index)">点击试用</el-button>
             </div>
             </div>
           </div>
           </div>
         </el-col>
         </el-col>
@@ -35,15 +31,8 @@
         :title="dialogTitle"
         :title="dialogTitle"
         @close="handleDialogClose"
         @close="handleDialogClose"
     >
     >
-      <!--      <template #header>-->
-      <!--        <div class="dialog-style">-->
-      <!--          <img :src="baseUrl + assemblyData[indexNum].image" alt="">-->
-      <!--          <div>{{ dialogTitle }}</div>-->
-      <!--        </div>-->
-      <!--      </template>-->
       <div>
       <div>
         <iframe v-show="iframeShow" ref="iframe" :src="iframeSrc" width="100%" height="700px"></iframe>
         <iframe v-show="iframeShow" ref="iframe" :src="iframeSrc" width="100%" height="700px"></iframe>
-        <!--        :style="{ width: iframeWidth + 'px', height: iframeHeight + 'px' }"-->
       </div>
       </div>
     </el-dialog>
     </el-dialog>
   </div>
   </div>
@@ -127,45 +116,56 @@ function handleDialogClose() {
 <style scoped lang="scss">
 <style scoped lang="scss">
 .app-container {
 .app-container {
   min-height: 100%;
   min-height: 100%;
-  padding-top: 30px;
-  background-color: #F7F8F9;
+  padding-top: 70px;
+  //background-color: #F7F8F9;
+}
+
+.flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 }
 
 
 .item {
 .item {
-  height: 168px;
+  //height: 168px;
   //background: #FBFCFE;
   //background: #FBFCFE;
-  background: url("@/assets/images/assemblyBg.jpg") no-repeat center center / cover;
-  border-radius: 15px;
-  border: 1px solid #D8D9DB;
-  padding: 24px 24px 0 24px;
-  margin-bottom: 24px;
+  //background: url("@/assets/images/assemblyBg.jpg") no-repeat center center / cover;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 30px 26px 40px 40px;
+  margin-bottom: 40px;
+  text-align: center;
 
 
   .title {
   .title {
     font-weight: bold;
     font-weight: bold;
     font-size: 20px;
     font-size: 20px;
+    line-height: 36px;
+    height: 36px;
     color: #303233;
     color: #303233;
   }
   }
 
 
   p {
   p {
     font-weight: 400;
     font-weight: 400;
     font-size: 16px;
     font-size: 16px;
-    color: #626566;
-    margin-top: 5px;
-    margin-bottom: 10px;
+    color: rgb(102, 102, 102);
+    line-height: 24px;
+    margin-top: 9px;
+    margin-bottom: 30px;
+    height: 48px;
     overflow: hidden;
     overflow: hidden;
     text-overflow: ellipsis;
     text-overflow: ellipsis;
     display: -webkit-box;
     display: -webkit-box;
-    -webkit-line-clamp: 3;
-    max-height: 100px;
+    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     -webkit-box-orient: vertical;
   }
   }
 
 
   img {
   img {
-    width: 85px;
-    height: 85px;
+    width: 70px;
+    height: 70px;
     object-fit: contain;
     object-fit: contain;
-    margin-right: 30px;
+    //margin-right: 30px;
     border-radius: 15px;
     border-radius: 15px;
+    margin: 0 auto 15px;
   }
   }
 }
 }
 
 
@@ -208,4 +208,13 @@ function handleDialogClose() {
     }
     }
   }
   }
 }
 }
+
+.el-button {
+  height: 40px;
+  line-height: 38px;
+  width: 140px;
+  border: 1px solid rgb(31, 74, 175);
+  border-radius: 10px;
+  color: rgb(31, 74, 175);
+}
 </style>
 </style>