课包编辑

src/components/mould/lessonContent.vue

@@ -4,7 +4,7 @@
       <el-col :span="12">
         <el-form ref="form" label-width="120px">
           <el-form-item label="课程内容">
-            <el-input type="textarea" rows="4" v-model="formData.content.tips.content"></el-input>
+            <el-input v-model="formData.content.tips.content"></el-input>
           </el-form-item>
           <el-form-item label="title1">
             <el-input rows="4" v-model="formData.content.tips.title1"></el-input>
@@ -25,9 +25,6 @@
           <div class="title">
             {{formData.title}}
           </div>
-          <div class="btn">
-            课程内容
-          </div>
           <div class="lessonContent">
             {{formData.content.tips.content}}
           </div>
@@ -35,13 +32,15 @@
             {{formData.content.tips.title1}}
           </div>
           <div class="title-content">
-            {{formData.content.tips.title1_content}}
+            <ul>
+              <li v-for="data in splitContent">· {{data}}</li>
+            </ul>
           </div>
           <div class="tips title2">
             {{formData.content.tips.title2}}
           </div>
-          <div class="title-content">
-            {{formData.content.tips.title2_content}}
+          <div class="title-content title2">
+            · {{formData.content.tips.title2_content}}
           </div>
         </div>
       </el-col>
@@ -56,6 +55,15 @@
     props:[
       'formData'
     ],
+    computed:{
+      splitContent(){
+        let arr = [];
+        if(this.formData.content.tips.title1_content){
+           arr = this.formData.content.tips.title1_content.split('\n');
+        }
+        return arr
+      },
+    },
     data(){
       return{
         background:background
@@ -75,7 +83,7 @@
     .title{
       width:219px;
       font-size:24px;
-      margin: 17px auto 17px;
+      margin: 36px auto 16px;
       text-align: center;
       font-family:Helvetica-Bold;
       font-weight:bold;
@@ -84,52 +92,74 @@
       height: 52px;
       overflow: hidden;
     }
-    .btn{
-      margin: auto;
-      width: 100px;
-      border-radius: 1000px;
-      border: 1px solid #FFF;
-      color: #FFFFFF;
-      text-align: center;
-      padding: 3px 0;
-    }
     .lessonContent{
       margin:8px auto;
-      font-size:12px;
+      font-size:16px;
       font-family:PingFang-SC-Medium;
       font-weight:500;
       color:rgba(255,255,255,1);
-      line-height:17px;
-      width: 196px;
-      padding: 6px 11px;
+      text-align: center;
+      line-height:22px;
+      width: 83px;
+      padding: 7px 5px;
       background: rgba(51,51,51,0.2);
-      border-radius: 8px;
-      height: 52px;
+      border-radius: 4px;
+      height: 22px;
     }
     .tips{
       height:20px;
       width: fit-content;
-      margin: 12px 0 12px 17px;
-      border-radius: 1000px;
-      font-size:14px;
-      font-family:PingFang-SC-Medium;
-      font-weight:500;
+      margin: 12px auto 10px auto;
+      font-size:16px;
+      font-family:PingFangSC-Semibold;
+      font-weight:600;
       color:rgba(145,237,250,1);
-      line-height:20px;
-      padding: 2px 12px;
-      border: 1px solid #91EDFA;
+      line-height:22px;
+      display: block;
+      border-radius: 1000px;
+      padding: 3px 18px;
+      border: 2px solid #91EDFA;
       &.title1{
-        margin-top: 30px;
+        margin-top: 55px;
       }
     }
     .title-content{
       word-break:break-all;
-      padding: 0 17px;
+      padding: 0 18px;
       font-size:12px;
       font-family:PingFang-SC-Regular;
       font-weight:400;
       color:rgba(136,136,136,1);
       line-height:17px;
+      &.title2{
+        font-size:14px;
+        font-family:PingFang-SC-Medium;
+        font-weight:500;
+        color:rgba(102,102,102,1);
+        line-height:20px;
+      }
+      ul{
+        margin: 0;
+        padding: 0;
+        font-size:14px;
+        height:58px;
+        overflow: hidden;
+        margin-bottom: 14px;
+        font-family:PingFang-SC-Medium;
+        font-weight:500;
+        color:rgba(102,102,102,1);
+        line-height:20px;
+        list-style-type:none;
+        &:after{
+          content: '';
+          display: block;
+          clear: both;
+        }
+        li{
+          width: 50%;
+          float: left;
+        }
+      }
     }
   }
 </style>

src/components/resources/editorDialog.vue

@@ -20,7 +20,7 @@
       <el-tab-pane label="宝贝玩一玩" name="play">
 
       </el-tab-pane>
-      <el-tab-pane label="多元趣味课" name="fun">
+      <el-tab-pane label="磨磨小耳朵" name="fun">
 
       </el-tab-pane>
     </el-tabs>