购买

assets/css/kaifain/detail.scss

@@ -1,12 +1,11 @@
 @import "../scssCommon";
 
 .kaifain {
-
   .topArea {
     position: relative;
     margin: -85px 0 0 !important;
     width: 100vw;
-    background:rgba(48,89,220,1);
+    background: rgba(48, 89, 220, 1);
     height: 705px;
 
     .bannerBg {
@@ -36,40 +35,40 @@
         margin: 0 auto;
         .title {
           margin-left: 107px;
-          height:72px;
-          font-size:54px;
-          font-weight:600;
-          color:rgba(255,255,255,1);
-          line-height:72px;
-          letter-spacing:3px;
+          height: 72px;
+          font-size: 54px;
+          font-weight: 600;
+          color: rgba(255, 255, 255, 1);
+          line-height: 72px;
+          letter-spacing: 3px;
         }
         .desc {
           margin-left: 107px;
           margin-top: 12px;
-          height:52px;
-          font-size:19px;
-          font-weight:400;
-          color:rgba(255,255,255,1);
-          line-height:26px;
+          height: 52px;
+          font-size: 19px;
+          font-weight: 400;
+          color: rgba(255, 255, 255, 1);
+          line-height: 26px;
         }
 
         .btn {
           margin-left: 107px;
-          width:213px;
-          height:56px;
-          border-radius:3px;
-          border:2px solid rgba(255,255,255,1);
+          width: 213px;
+          height: 56px;
+          border-radius: 3px;
+          border: 2px solid rgba(255, 255, 255, 1);
           display: flex;
           justify-content: center;
           align-items: center;
           margin-top: 67px;
           cursor: pointer;
           p {
-            height:25px;
-            font-size:18px;
-            font-weight:500;
-            color:rgba(255,255,255,1);
-            line-height:25px;
+            height: 25px;
+            font-size: 18px;
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: 25px;
           }
         }
       }
@@ -88,19 +87,19 @@
       .title {
         text-align: center;
         .word {
-          height:48px;
-          font-size:34px;
-          font-weight:500;
-          color:rgba(34,34,34,1);
-          line-height:48px;
-          letter-spacing:1px;
+          height: 48px;
+          font-size: 34px;
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          line-height: 48px;
+          letter-spacing: 1px;
         }
         .line {
           margin: 10px auto;
-          width:40px;
-          height:4px;
-          background:rgba(32,148,243,1);
-          border-radius:4px;
+          width: 40px;
+          height: 4px;
+          background: rgba(32, 148, 243, 1);
+          border-radius: 4px;
         }
       }
       .introContent {
@@ -115,19 +114,19 @@
       .title {
         text-align: center;
         .word {
-          height:48px;
-          font-size:34px;
-          font-weight:500;
-          color:rgba(34,34,34,1);
-          line-height:48px;
-          letter-spacing:1px;
+          height: 48px;
+          font-size: 34px;
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          line-height: 48px;
+          letter-spacing: 1px;
         }
         .line {
           margin: 10px auto 0;
-          width:40px;
-          height:4px;
-          background:rgba(32,148,243,1);
-          border-radius:4px;
+          width: 40px;
+          height: 4px;
+          background: rgba(32, 148, 243, 1);
+          border-radius: 4px;
         }
       }
 
@@ -163,18 +162,18 @@
             .top {
               flex-grow: 1;
               .bTitle {
-                font-size:17px;
-                font-weight:600;
-                color:rgba(34,34,34,1);
-                line-height:24px;
+                font-size: 17px;
+                font-weight: 600;
+                color: rgba(34, 34, 34, 1);
+                line-height: 24px;
               }
               .bStitle {
                 margin-top: 9px;
-                height:40px;
-                font-size:14px;
-                font-weight:400;
-                color:rgba(34,34,34,1);
-                line-height:20px;
+                height: 40px;
+                font-size: 14px;
+                font-weight: 400;
+                color: rgba(34, 34, 34, 1);
+                line-height: 20px;
               }
             }
             .bottom {
@@ -191,11 +190,11 @@
               }
               .word {
                 margin-left: 7px;
-                height:17px;
-                font-size:12px;
-                font-weight:600;
-                color:rgba(51,51,51,1);
-                line-height:17px;
+                height: 17px;
+                font-size: 12px;
+                font-weight: 600;
+                color: rgba(51, 51, 51, 1);
+                line-height: 17px;
               }
 
             }
@@ -205,6 +204,207 @@
     }
 
   }
+
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.isMobile {
+  background-color: #fff;
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  .topArea {
+    position: relative;
+    margin: -85px 0 0 !important;
+    width: 100vw;
+    background: rgba(48, 89, 220, 1);
+    height: pxtovw(602);
+
+    .bannerBg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100vw;
+      img {
+        width: 100vw;
+        height: pxtovw(602);
+        vertical-align: middle;
+      }
+    }
+    .topContent {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .left {
+        width: 100vw;
+        margin: 0 auto;
+        .title {
+          margin-top: pxtovw(140);
+          height: pxtovw(51);
+          font-size: pxtovw(34);
+          font-weight: 600;
+          color: rgba(255, 255, 255, 1);
+          line-height: pxtovw(50);
+          letter-spacing: pxtovw(2);
+        }
+        .desc {
+          margin-top: pxtovw(10);
+          height: pxtovw(38);
+          font-size: pxtovw(13);
+          font-weight: 400;
+          color: rgba(255, 255, 255, 1);
+          line-height: pxtovw(19);
+        }
+
+        .btn {
+          width: pxtovw(187);
+          height: pxtovw(39);
+          border-radius: pxtovw(2);
+          border: pxtovw(1) solid rgba(255, 255, 255, 1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: pxtovw(25);
+          cursor: pointer;
+          p {
+            height: pxtovw(17);
+            font-size: pxtovw(13);
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: pxtovw(17);
+          }
+        }
+      }
+    }
+  }
+
+  .contentArea {
+    width: 100vw;
+    margin: 0 auto;
+    box-sizing: border-box;
+
+    .introArea {
+      padding: pxtovw(33) pxtovw(14);
+      background-color: #fff;
+
+      .title {
+        text-align: center;
+        .word {
+          font-size: pxtovw(24);
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          letter-spacing: pxtovw(1);
+        }
+        .line {
+          margin: pxtovw(8) auto;
+          width: pxtovw(29);
+          height: pxtovw(3);
+          background: rgba(32, 148, 243, 1);
+          border-radius: pxtovw(3);;
+        }
+      }
+      .introContent {
+        width: pxtovw(347);
+        p {
+          word-break: break-all;
+        }
+      }
+    }
+    .caseListArea {
+      margin-top: 0;
+      padding: 0;
+      padding-top: pxtovw(30);
+      background-color: #fff;
+
+      .title {
+        text-align: center;
+        .word {
+          height: pxtovw(33);
+          font-size: pxtovw(24);
+          font-weight: 500;
+          color: rgba(34, 34, 34, 1);
+          line-height: pxtovw(33);
+          letter-spacing: pxtovw(1);
+        }
+        .line {
+          margin: pxtovw(8) auto;
+          width: pxtovw(29);
+          height: pxtovw(3);
+          background: rgba(32, 148, 243, 1);
+          border-radius: pxtovw(3);
+        }
+      }
+
+      .list {
+        margin-top: pxtovw(10);
+        display: flex;
+        width: 100%;
+        padding: 0 pxtovw(10);
+        .cell {
+          width: 100vw;
+          height: pxtovw(96);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-bottom: pxtovw(1) solid #EDEDED;
+
+          .left {
+            flex-shrink: 0;
+            font-size: 0;
+            width: pxtovw(72);
+            height: pxtovw(72);
+            img {
+              width: pxtovw(72);
+              height: pxtovw(72);
+            }
+          }
+          .right {
+            width: pxtovw(268);
+            flex-grow: 1;
+            margin-left: pxtovw(10);
+            height: pxtovw(72);
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+            .top {
+              display: flex;
+              justify-content: center;
+              flex-direction: column;
+
+              .bStitle {
+                height: auto;
+                width: pxtovw(268);
+                margin-top: 0;
+                max-height: pxtovw(40);
+                font-size: pxtovw(14);
+                font-weight: 400;
+                color: rgba(34, 34, 34, 1);
+                line-height: pxtovw(20);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+              }
+            }
+          }
+        }
+      }
+    }
+
+  }
 }
 
 .main {
@@ -213,6 +413,6 @@
 
 @media screen and (max-width: 960px) {
   .main {
-    min-width: 1000px;
+    min-width: auto !important;
   }
 }

assets/css/kaifain/kaifainAdd.scss

@@ -157,6 +157,11 @@
     }
 
     .intro {
+      .stitle {
+        span {
+          cursor: pointer;
+        }
+      }
       .editor {
         width: 768px;
         height: 380px;

pages/kaifain/_tid/index.vue

@@ -2,7 +2,8 @@
   <div class="kaifain" :class="{isMobile: mobile}">
     <div class="topArea">
       <div class="bannerBg">
-        <img src="~@/assets/img/kaifain/detail/banner@2x.png" alt="">
+        <img src="~@/assets/img/kaifain/detail/banner@2x.png" alt="" v-if="!mobile">
+        <img src="~@/assets/img/kaifain/detail/banner_h5@2x.png" alt="" v-else>
       </div>
       <div class="topContent">
         <div class="left">
@@ -26,7 +27,6 @@
        </div>
      </div>
 
-
       <div class="caseListArea" v-if="haveCase">
         <div class="title">
           <p class="word">成功案例</p>
@@ -39,10 +39,10 @@
             </div>
             <div class="right">
               <div class="top">
-                <div class="bTitle">{{item.title}}</div>
+                <div class="bTitle" v-if="!mobile" >{{item.title}}</div>
                 <div class="bStitle">{{item.description}}</div>
               </div>
-              <div class="bottom" @click="openPDF(item)">
+              <div class="bottom" @click="openPDF(item)"  v-if="!mobile">
                 <div class="icon"/>
                 <div class="word">{{item.title}}.pdf</div>
               </div>

pages/kaifain/add/index.vue

@@ -77,7 +77,7 @@
         <el-input v-model="data.description" placeholder="请用一句话来介绍您的方案，10-50字符"></el-input>
       </div>
       <div class="intro">
-        <div class="stitle">方案介绍<span>查看参考示例</span></div>
+        <div class="stitle">方案介绍<span @click="jumpToOther">查看参考示例</span></div>
         <div class="editor">
           <editor :content="data.detail"
             @change="(val) => data.detail = val"
@@ -583,6 +583,10 @@
       },
       openNewUrl(item) {
         window.open(item.file, '__black')
+      },
+      jumpToOther() {
+        let url = "https://www.proginn.com/kaifain/10"
+        window.open(url, '__black')
       }
     },