fix bug

src/components/wt-card/index.vue

@@ -1,7 +1,17 @@
 <template>
   <el-card shadow="hover">
-    <div class="font-16 bold-500 flex-justify-start flex mb-10">
-      {{ title }}
+    <div class="flex flex-justify-between flex-center mb-10">
+      <div class="font-16 bold-500 flex-justify-start flex">
+        {{ title }}
+      </div>
+      <el-button
+        type="primary"
+        icon="Edit"
+        v-if="editBtn"
+        size="small"
+        @click="change"
+        >{{ btnText }}</el-button
+      >
     </div>
     <slot></slot>
   </el-card>
@@ -13,6 +23,24 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    editBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      btnText: '编 辑'
+    }
+  },
+  methods: {
+    change() {
+      this.btnText = this.btnText === '编 辑' ? '保 存' : '编 辑'
+      this.$emit('change', this.btnText === '编 辑')
+      if (this.btnText === '保 存') {
+        this.$emit('save')
+      }
     }
   }
 }

src/views/project/componens/info1.vue

@@ -1,6 +1,104 @@
 <template>
-  <wt-card title="基础信息">
-    <div class="flex flex-justify-start light-green-bg full-width">333</div>
+  <wt-card title="基础信息" :edit-btn="true" @change="change" @save="save">
+    <el-form class="mt-20" :disabled="disabled">
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">项目名称:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">总投资金额:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">区县:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">责任单位:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">主管单位:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">责任领导:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">联系电话:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">所属领域:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width flex-child-average">
+          <div class="flex flex-center full-width item">
+            <span class="title">所属行业:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width" style="flex: 2">
+          <div class="flex flex-center full-width" style="width: 95%">
+            <span class="title">项目位置:</span>
+            <el-input></el-input>
+            <el-button class="ml-10" plain type="primary">查看地图</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item class="full-width" style="flex: 1">
+          <div class="flex flex-center full-width item">
+            <span class="title">项目标签:</span>
+            <el-input></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width" style="flex: 1">
+          <div
+            class="flex flex-center flex-align-start full-width"
+            style="width: 96.7%"
+          >
+            <span class="title-textarea">建设规模:</span>
+            <el-input type="textarea" :rows="5"></el-input>
+          </div>
+        </el-form-item>
+      </div>
+      <div class="flex flex-justify-center">
+        <el-form-item class="full-width" style="flex: 1">
+          <div
+            class="flex flex-center flex-align-start full-width"
+            style="width: 96.7%"
+          >
+            <span class="title-textarea">建设内容:</span>
+            <el-input type="textarea" :rows="5"></el-input>
+          </div>
+        </el-form-item>
+      </div>
+    </el-form>
   </wt-card>
 </template>
 
@@ -10,8 +108,35 @@ import wtCard from '@/components/wt-card/index.vue'
 export default {
   components: {
     wtCard
+  },
+  data() {
+    return {
+      disabled: true
+    }
+  },
+  methods: {
+    save() {
+      console.log('save')
+    },
+    change(res) {
+      this.disabled = res
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.title {
+  width: 100px;
+  text-align: left;
+}
+
+.title-textarea {
+  width: 85px;
+  text-align: left;
+}
+
+.item {
+  width: 90%;
+}
+</style>