40

src/views/BasicSettings/copy_Setting.vue

@@ -1,10 +1,11 @@
 <template>
-<div style="overflow:auto">
+<div style="overflow-y:auto;overflow-x:hidden;height:92%;width:100%;margin-top:10px">
       <Toptitle title="项目设置">
       </Toptitle>
      <div style="padding: 10px" class="setting" >
-         <Card :padding="0" v-for="(item,index) in content" :key="index">
-           <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" autofocus='true' style="width:90%"></Input>
+         <Card :padding="0" v-for="(item,index) in content" :key="index" >
+
+           <Input slot="title" v-if="item.title_type" @on-blur="change_title(item,1)" v-model="item.title" :autofocus='true' style="width:80%"></Input>
           <p slot="title" v-else @click="change_title(item)">{{item.title}}</p>
           <a @click="upload(item)" class="upload_pic">保存</a>
 
@@ -13,15 +14,15 @@
           <!-- 开关 -->
            
                 <div v-if="_item.sub_state == 2">
-                  <label>{{_item.title}}</label>  <i-switch :value="_item.value==1?true:false" slot="extra"  @on-change="change($event,_index,item)" />
+                  <label style="margin-right:220px">{{_item.title}}</label>  <i-switch :value="_item.value==1?true:false" slot="extra"  @on-change="change($event,_index,item)" />
                 </div>
 
 
 
             <!-- 输入框 -->
                 <!-- <div  v-for="(_item,_index) in item.content" :key="_index" style="position: relative;top:-40px;display:flex;margin-top:20px"> -->
-                    <div style="position: relative;top:-40px;display:flex;margin-top:20px" v-if="_item.sub_state == 1">
-                   <label style="width:80px;margin-right:60px">{{_item.title}}:</label> <Input v-model="_item.value" />
+                    <div  v-if="_item.sub_state == 1">
+                   <label >{{_item.title}}:</label> <Input v-model="_item.value" style="width:250px;margin-left:20px"/>
                </div>
 
 
@@ -29,6 +30,7 @@
 
           <!-- 图片 -->
               <div class="product-add" v-if="_item.sub_state == 3">
+                  <label>{{_item.title}}:</label>
                 <div
                   class="items"
                   v-if="_item.value"
@@ -60,7 +62,7 @@
             </div>
           </div>
             <Tooltip max-width="200" :content="item.remark" 
-            style="min-width:200px;position:absolute;right:-168px;top:169px;cursor: pointer">
+            style="min-width:200px;position:absolute;right:-168px;bottom:9px;cursor: pointer">
            <Icon type="md-help-circle" size="24" />
             </Tooltip>
         </Card>
@@ -191,7 +193,8 @@ export default {
             this.upload(item)
           }
       },
-        change(e,index,item){
+        change(e,_index,item){
+            item.content[_index].value = e?1:0;
              this.axios.post('/api/basics_config_edit',item).then(res=>{
                  console.log(res)
              })
@@ -220,10 +223,10 @@ export default {
       let file = e.target.files[0];
       
       this.postImg(file,_index,index);
-      // e.target.value = null;
+      e.target.value = null;
     },
     postImg(file, _index,index) {
-        console.log(this.content)
+        
       let formData = new FormData();
       formData.append("file", file);
       this.axios.post("/api/upload_pic", formData).then((res) => {
@@ -242,17 +245,18 @@ export default {
 <style scoped lang='scss'>
 .setting{
    margin-top:10px ;
-   display: flex;
-   flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 .product-add {
 //   position: relative;
 //   top: 0
 //   height: 140px;
   .ipt {
-    // position: absolute;
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
     opacity: 0;
     cursor: pointer;
     outline: none;
@@ -260,10 +264,10 @@ export default {
     // left: 0;
   }
   .add-items {
-    //   position: relative;
-    //   left: 50%;
-    //   top:40% ;
-      transform: translate(-50%,-50%);
+      position: relative;
+      left: 25px;
+      top: 20px;
+    //   transform: translate(-50%,-50%);
     width: 40px;
     height: 40px;
     border: 1px dotted #e7e7e7;
@@ -305,9 +309,10 @@ export default {
   }
 }
 /deep/ .ivu-card{
+        
          background:  #f8f8f9;
-         width: 400px;
-         height: 300px;
+         width: 365px;
+        //  height: auto;
          margin: 10px;
          border-radius: 20px;
          position: relative;
@@ -317,7 +322,7 @@ export default {
 }
  /deep/ .ivu-card-head{
     border-bottom: none;
-    height: 60px;
+    height: auto;
     p{
          font-weight: 800;
     }
@@ -326,16 +331,16 @@ export default {
 /deep/ .ivu-card-body{
     display: flex;
     flex-direction: column;
-    height: 200px;
 }
 .delete-img{
     position: relative;
-    top:-35px
+    top:-105px;
+    left: 90px;
 }
 .upload_pic{
     position: relative;
     top: -44px;
-    right: -200px;
+    right: -310px;
     color: red;
 }
 .upload_text{
@@ -345,11 +350,18 @@ export default {
     color: red;
 }
 .card_content{
+
+    position:relative;
+    top: -30px;
+    left: 10px;
     display: flex;
     flex-direction: column;
+   div{
+       margin: 10px 0;
+   }
 }
-/deep/ .ivu-cell-group{
-  position: relative;
-  top: -10px;
-}
+// /deep/ .ivu-cell-group{
+//   position: relative;
+//   top: -10px;
+// }
 </style>