diff --git a/src/assets/images/detailsicon/icon-bj@2x.png b/src/assets/images/detailsicon/icon-bj@2x.png
new file mode 100644
index 0000000..3c89832
Binary files /dev/null and b/src/assets/images/detailsicon/icon-bj@2x.png differ
diff --git a/src/assets/images/detailsicon/icon-dc@2x.png b/src/assets/images/detailsicon/icon-dc@2x.png
new file mode 100644
index 0000000..6195fb3
Binary files /dev/null and b/src/assets/images/detailsicon/icon-dc@2x.png differ
diff --git a/src/assets/images/detailsicon/icon-关闭@2x.png b/src/assets/images/detailsicon/icon-关闭@2x.png
new file mode 100644
index 0000000..8e6b87d
Binary files /dev/null and b/src/assets/images/detailsicon/icon-关闭@2x.png differ
diff --git a/src/assets/images/icon-bf@2x.png b/src/assets/images/icon-bf@2x.png
new file mode 100644
index 0000000..b97cc75
Binary files /dev/null and b/src/assets/images/icon-bf@2x.png differ
diff --git a/src/views/components/ProjectDetails/Basic.vue b/src/views/components/ProjectDetails/Basic.vue
index ff62c6d..d15a72a 100644
--- a/src/views/components/ProjectDetails/Basic.vue
+++ b/src/views/components/ProjectDetails/Basic.vue
@@ -7,8 +7,14 @@
                 <span>基本信息</span>
             </div>
             <div class="topright">
-                <el-button type="primary" icon="el-icon-edit" size="mini" plain style="border: none;"> 编辑</el-button>
-                <el-button type="primary" icon="el-icon-upload2" size="mini" plain style="border: none;"> 导出</el-button>
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button> 
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    导出
+                </el-button> 
             </div>
         </div>
         <!-- 内容区 -->
diff --git a/src/views/components/ProjectDetails/Buildings.vue b/src/views/components/ProjectDetails/Buildings.vue
index 619b09e..5d74987 100644
--- a/src/views/components/ProjectDetails/Buildings.vue
+++ b/src/views/components/ProjectDetails/Buildings.vue
@@ -7,26 +7,167 @@
                 <span>建筑信息</span>
             </div>
             <div class="topright">
-                <el-button 
-                type="primary" 
-                icon="el-icon-edit" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导入</el-button>
-                <el-button 
-                type="primary" 
-                icon="el-icon-upload" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导出</el-button>
+                <el-button type="primary" size="mini" plain
+                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
+                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button>
+                <el-button type="primary" size="mini" plain
+                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
+                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    导出
+                </el-button>
+            </div>
+        </div>
+        <div class="tagdiv">
+            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
+                @close="handleClose(tag)">
+                {{ tag }}
+            </el-tag>
+            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
+                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
+            </el-input>
+            <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
+        </div>
+        <!-- 内容区 -->
+        <div class="content">
+            <div class="descriptionsdiv">
+                <el-descriptions class="margin-top" :column="4" :size="size" border>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            总用地面积(平方米)
+                        </template>
+                        THi SIP高端装备工业港
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            容积率
+                        </template>
+                        泰凌医药（中国)有限公司
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            总建筑面积（平方米）
+                        </template>
+                        项目法人单位性质
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            标准层建筑面积（平方米）
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            计容积率建筑面积(平方米)
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            建筑密度(%)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            绿地率(%)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            建筑栋数（栋）：
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            地上建筑面积(平方米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            地下建筑面积(平方米)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            最高建筑层数（层）
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            最高建筑高度(米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            机动车停车位(辆)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            非机动车停车位(辆)
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            防火等级
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            规划文件
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                </el-descriptions>
             </div>
         </div>
-        <div>123</div>
     </div>
 </template>
 
 <script>
+  export default {
+    data() {
+      return {
+        dynamicTags: ['标签一', '标签二', '标签三'],
+        inputVisible: false,
+        inputValue: ''
+      };
+    },
+    methods: {
+      handleClose(tag) {
+        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+      },
 
+      showInput() {
+        this.inputVisible = true;
+        this.$nextTick(_ => {
+          this.$refs.saveTagInput.$refs.input.focus();
+        });
+      },
+
+      handleInputConfirm() {
+        let inputValue = this.inputValue;
+        if (inputValue) {
+          this.dynamicTags.push(inputValue);
+        }
+        this.inputVisible = false;
+        this.inputValue = '';
+      }
+    }
+  }
 </script>
 
 <style scoped>
@@ -35,29 +176,37 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
-    gap: 1rem;
 }
-.containertop{
+
+.content {
+    padding: 1rem;
+    display: flex;
+}
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
     padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +218,38 @@
     font-style: normal;
     text-transform: none;
 }
+
+.picturediv {
+    width: 18.31rem;
+    height: 25.31rem;
+    background-color: lightblue;
+}
+
+.descriptionsdiv {
+    width: 100%;
+    margin-left: 1rem;
+    height: auto;
+}
+
+.two-row-item {
+    height: 20rem;
+}
+.tagdiv{
+    padding: 1rem 2rem 0  2rem;
+}
+.el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
 </style>
diff --git a/src/views/components/ProjectDetails/Companyenter.vue b/src/views/components/ProjectDetails/Companyenter.vue
index 38b1d3b..87409e3 100644
--- a/src/views/components/ProjectDetails/Companyenter.vue
+++ b/src/views/components/ProjectDetails/Companyenter.vue
@@ -7,26 +7,185 @@
                 <span>企业入驻信息</span>
             </div>
             <div class="topright">
-                <el-button 
-                type="primary" 
-                icon="el-icon-edit" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导入</el-button>
-                <el-button 
-                type="primary" 
-                icon="el-icon-upload" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导出</el-button>
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button> 
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    导出
+                </el-button> 
+            </div>
+        </div>
+        <!-- 内容区上方的表格 -->
+        <div class="tagdiv">
+            <div class="descriptionsdiv">
+                <el-descriptions class="margin-top" :column="4" :size="size" border>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            计容积率建筑面积(平方米)
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            建筑密度(%)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            绿地率(%)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            建筑栋数（栋）：
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            地上建筑面积(平方米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            地下建筑面积(平方米)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            最高建筑层数（层）
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            最高建筑高度(米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                </el-descriptions>
+            </div>
+        </div>
+        <!-- 内容区 -->
+        <div class="content">
+            <div class="descriptionsdiv">
+                <el-table
+        :data="tableData"
+        style="width: 100%">
+        <el-table-column
+          prop="name"
+          label="项目名称"
+          width="210">
+          <template slot-scope="scope">
+            <span style="color: #2B62F1;">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="状态"
+          width="200">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="当月完成投资"
+          width="240">
+          <template slot-scope="scope">
+            <span style="color: #2B62F1;">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="累计完成投资"
+          width="220">
+          <template slot-scope="scope">
+            <span style="color: #2B62F1;">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="data"
+          label='截止目前累计建成面积(平方米)'
+          width="260"
+          >
+        </el-table-column>
+        <el-table-column
+          prop="data"
+          label='贷款额度(万元)'
+          width="200">
+        </el-table-column>
+        <el-table-column
+          prop="data"
+          label='项目进展详情'
+          width="140">
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          label="状态"
+          width="80">
+          <template slot-scope="scope">
+            <span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
             </div>
         </div>
-        <div>123</div>
     </div>
 </template>
 
 <script>
-
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '大众电脑生成制造基地',
+          address: ' 1518 弄',
+          data: '1000',
+          status: '在建'
+        },
+        {
+          date: '2016-05-04',
+          name: '大众电脑生成制造基地',
+          address: ' 1517 弄',
+          data: '1500',
+          status: '拟建'
+        },
+        {
+          date: '2016-05-01',
+          name: '大众电脑生成制造基地',
+          address: ' 1519 弄',
+          data: '2000',
+          status: '已建'
+        },
+        {
+          date: '2016-05-03',
+          name: '大众电脑生成制造基地',
+          address: ' 1516 弄',
+          data: '2500',
+          status: '在建'
+        }
+      ],
+    }
+  },
+  methods: {
+    getStatusColor(status) {
+      switch (status) {
+        case '在建':
+          return 'color: #2DD29F;';
+        case '拟建':
+          return 'color: #F08445;';
+        case '已建':
+          return 'color: #2B62F1;';
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -35,29 +194,37 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
-    gap: 1rem;
 }
-.containertop{
+
+.content {
+    padding: 1rem;
+    display: flex;
+}
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
     padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +236,21 @@
     font-style: normal;
     text-transform: none;
 }
+
+.picturediv {
+    width: 18.31rem;
+    height: 25.31rem;
+    background-color: lightblue;
+}
+.descriptionsdiv{
+    width: 100%;
+    margin-left: 1rem;
+    height: auto;
+}
+.two-row-item{
+    height: 20rem;
+}
+.tagdiv{
+    padding: 1rem 3em 1rem 1rem;
+}
 </style>
diff --git a/src/views/components/ProjectDetails/Liver.vue b/src/views/components/ProjectDetails/Liver.vue
index 8d27a2b..53f6e1e 100644
--- a/src/views/components/ProjectDetails/Liver.vue
+++ b/src/views/components/ProjectDetails/Liver.vue
@@ -21,12 +21,38 @@
                 style="border: none;"> 导出</el-button>
             </div>
         </div>
-        <div>123</div>
+        <!-- 视频 -->
+        <div class="image-container">
+            <div v-for="(image, index) in images" :key="index" class="image-box">
+                <img :src="image.src" alt="项目录像" class="image">
+                <!-- 关闭按钮 -->
+                <div class = "close-button" @click="removeImage(index)"> 
+                    <img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
+                </div>
+                <!-- 播放按钮 -->
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-
+export default {
+    data() {
+        return {
+            images: [
+                { src: '' },
+                { src: '' },
+                { src: '' },
+                // 添加更多图片
+            ]
+        };
+    },
+    methods: {
+        removeImage(index) {
+            this.images.splice(index, 1);
+        }
+    }
+};
 </script>
 
 <style scoped>
@@ -35,29 +61,34 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+    padding: 1rem;
     gap: 1rem;
+    overflow: auto;
 }
-.containertop{
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
-    padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +100,38 @@
     font-style: normal;
     text-transform: none;
 }
-</style>
+
+.image-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.image-box {
+    position: relative;
+    width: 21.75rem;
+    height: 12.44rem;
+    background-color: #f0f0f0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.close-button {
+    width: 1.25rem;
+    height: 1.25rem;
+    position: absolute;
+    top: 0.2rem;
+    right: 0.2rem;
+}
+.close-button img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/ProjectDetails/Memo.vue b/src/views/components/ProjectDetails/Memo.vue
index e29d384..c1dd0ad 100644
--- a/src/views/components/ProjectDetails/Memo.vue
+++ b/src/views/components/ProjectDetails/Memo.vue
@@ -7,26 +7,81 @@
                 <span>项目备忘录</span>
             </div>
             <div class="topright">
-                <el-button 
-                type="primary" 
-                icon="el-icon-edit" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导入</el-button>
-                <el-button 
-                type="primary" 
-                icon="el-icon-upload" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导出</el-button>
+                <el-button type="primary" icon="el-icon-edit" size="mini" plain style="border: none;"> 导入</el-button>
+                <el-button type="primary" icon="el-icon-upload" size="mini" plain style="border: none;"> 导出</el-button>
+            </div>
+        </div>
+        <div class="content">
+            <div class="descriptionsdiv">
+                <el-form :model="form" @submit.native.prevent="onSubmit">
+                    <el-form-item>
+                        <el-col :span="11">
+                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
+                                style="width: 100%;"></el-date-picker>
+                        </el-col>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="descriptionsdiv">
+                <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
+                    @close="handleClose(tag)">
+                    {{ tag }}
+                </el-tag>
+                <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
+                    @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
+                </el-input>
+                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
             </div>
         </div>
-        <div>123</div>
     </div>
 </template>
 
 <script>
+export default {
+    data() {
+        return {
+            dynamicTags: ['标签一', '标签二', '标签三'],
+            inputVisible: false,
+            inputValue: '',
+            form: {
+                name: '',
+                region: '',
+                date1: null, // 确保初始值为 null 或者一个默认日期
+                date2: '',
+                delivery: false,
+                type: [],
+                resource: '',
+                desc: ''
+            }
+        };
+    },
+    methods: {
+        onSubmit() {
+            console.log('submit!');
+            console.log(this.form); // 确保在提交时可以正确读取 form 数据
+        },
+        handleClose(tag) {
+            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
+        },
+
+        showInput() {
+            this.inputVisible = true;
+            this.$nextTick(_ => {
+                this.$refs.saveTagInput.$refs.input.focus();
+            });
+        },
 
+        handleInputConfirm() {
+            let inputValue = this.inputValue;
+            if (inputValue) {
+                this.dynamicTags.push(inputValue);
+            }
+            this.inputVisible = false;
+            this.inputValue = '';
+        }
+    }
+};
 </script>
 
 <style scoped>
@@ -35,11 +90,19 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
     gap: 1rem;
 }
-.containertop{
+
+.content {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
@@ -47,17 +110,20 @@
     border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +135,28 @@
     font-style: normal;
     text-transform: none;
 }
-</style>
+
+.descriptionsdiv {
+    width: 100%;
+    margin-left: 1rem;
+    height: auto;
+}
+
+.el-tag+.el-tag {
+    margin-left: 10px;
+}
+
+.button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/ProjectDetails/Models.vue b/src/views/components/ProjectDetails/Models.vue
index 1758b1a..9097225 100644
--- a/src/views/components/ProjectDetails/Models.vue
+++ b/src/views/components/ProjectDetails/Models.vue
@@ -4,24 +4,122 @@
         <div class="containertop">
             <div class="topleft">
                 <img src="../../../assets/images/detailsicon/1.png" alt="">
-                <span>要素模型信息</span>
+                <span>五要素模型信息</span>
             </div>
             <div class="topright">
-                <el-button 
-                type="primary" 
-                icon="el-icon-edit" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导入</el-button>
-                <el-button 
-                type="primary" 
-                icon="el-icon-upload" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导出</el-button>
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button> 
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    导出
+                </el-button> 
+            </div>
+        </div>
+        <!-- 内容区 -->
+        <div class="content">
+            <div class="descriptionsdiv">
+                <el-descriptions class="margin-top" :column="4" :size="size" border>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            总用地面积(平方米)
+                        </template>
+                        THi SIP高端装备工业港
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                           
+                            容积率              
+                        </template>
+                        泰凌医药（中国)有限公司
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                            
+                            总建筑面积（平方米）
+                        </template>
+                        项目法人单位性质
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                           
+                            标准层建筑面积（平方米）
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                         
+                            计容积率建筑面积(平方米)
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                           
+                            建筑密度(%)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            绿地率(%)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                        
+                            建筑栋数（栋）：
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                      
+                            地上建筑面积(平方米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            地下建筑面积(平方米)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            最高建筑层数（层）
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            最高建筑高度(米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                         
+                            机动车停车位(辆)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                   
+                            非机动车停车位(辆)
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                    
+                            防火等级
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                         
+                            规划文件
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                </el-descriptions>
             </div>
         </div>
-        <div>123</div>
     </div>
 </template>
 
@@ -35,29 +133,37 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
-    gap: 1rem;
 }
-.containertop{
+
+.content {
+    padding: 1rem;
+    display: flex;
+}
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
     padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +175,18 @@
     font-style: normal;
     text-transform: none;
 }
+
+.picturediv {
+    width: 18.31rem;
+    height: 25.31rem;
+    background-color: lightblue;
+}
+.descriptionsdiv{
+    width: 100%;
+    margin-left: 1rem;
+    height: auto;
+}
+.two-row-item{
+    height: 20rem;
+}
 </style>
diff --git a/src/views/components/ProjectDetails/Months.vue b/src/views/components/ProjectDetails/Months.vue
index 3696f1b..e31a1eb 100644
--- a/src/views/components/ProjectDetails/Months.vue
+++ b/src/views/components/ProjectDetails/Months.vue
@@ -7,26 +7,130 @@
                 <span>月度进展信息</span>
             </div>
             <div class="topright">
-                <el-button 
-                type="primary" 
-                icon="el-icon-edit" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导入</el-button>
-                <el-button 
-                type="primary" 
-                icon="el-icon-upload" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导出</el-button>
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button> 
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    导出
+                </el-button> 
+            </div>
+        </div>
+        <!-- 内容区 -->
+        <div class="content">
+            <div class="descriptionsdiv">
+                <el-table
+        :data="tableData"
+        style="width: 100%">
+        <el-table-column
+          prop="name"
+          label="项目名称"
+          width="210">
+          <template slot-scope="scope">
+            <span style="color: #2B62F1;">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="状态"
+          width="200">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="当月完成投资"
+          width="240">
+          <template slot-scope="scope">
+            <span style="color: #2B62F1;">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="累计完成投资"
+          width="220">
+          <template slot-scope="scope">
+            <span style="color: #2B62F1;">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="data"
+          label='截止目前累计建成面积(平方米)'
+          width="260"
+          >
+        </el-table-column>
+        <el-table-column
+          prop="data"
+          label='贷款额度(万元)'
+          width="200">
+        </el-table-column>
+        <el-table-column
+          prop="data"
+          label='项目进展详情'
+          width="140">
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          label="状态"
+          width="80">
+          <template slot-scope="scope">
+            <span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
             </div>
         </div>
-        <div>123</div>
     </div>
 </template>
 
 <script>
-
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '大众电脑生成制造基地',
+          address: ' 1518 弄',
+          data: '1000',
+          status: '在建'
+        },
+        {
+          date: '2016-05-04',
+          name: '大众电脑生成制造基地',
+          address: ' 1517 弄',
+          data: '1500',
+          status: '拟建'
+        },
+        {
+          date: '2016-05-01',
+          name: '大众电脑生成制造基地',
+          address: ' 1519 弄',
+          data: '2000',
+          status: '已建'
+        },
+        {
+          date: '2016-05-03',
+          name: '大众电脑生成制造基地',
+          address: ' 1516 弄',
+          data: '2500',
+          status: '在建'
+        }
+      ],
+    }
+  },
+  methods: {
+    getStatusColor(status) {
+      switch (status) {
+        case '在建':
+          return 'color: #2DD29F;';
+        case '拟建':
+          return 'color: #F08445;';
+        case '已建':
+          return 'color: #2B62F1;';
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -35,29 +139,37 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
-    gap: 1rem;
 }
-.containertop{
+
+.content {
+    padding: 1rem;
+    display: flex;
+}
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
     padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +181,18 @@
     font-style: normal;
     text-transform: none;
 }
+
+.picturediv {
+    width: 18.31rem;
+    height: 25.31rem;
+    background-color: lightblue;
+}
+.descriptionsdiv{
+    width: 100%;
+    margin-left: 1rem;
+    height: auto;
+}
+.two-row-item{
+    height: 20rem;
+}
 </style>
diff --git a/src/views/components/ProjectDetails/Programme.vue b/src/views/components/ProjectDetails/Programme.vue
index e71de26..12bce7d 100644
--- a/src/views/components/ProjectDetails/Programme.vue
+++ b/src/views/components/ProjectDetails/Programme.vue
@@ -7,21 +7,119 @@
                 <span>规划信息</span>
             </div>
             <div class="topright">
-                <el-button 
-                type="primary" 
-                icon="el-icon-edit" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导入</el-button>
-                <el-button 
-                type="primary" 
-                icon="el-icon-upload" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导出</el-button>
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button> 
+                <el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    导出
+                </el-button> 
+            </div>
+        </div>
+        <!-- 内容区 -->
+        <div class="content">
+            <div class="descriptionsdiv">
+                <el-descriptions class="margin-top" :column="4" :size="size" border>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            总用地面积(平方米)
+                        </template>
+                        THi SIP高端装备工业港
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                           
+                            容积率              
+                        </template>
+                        泰凌医药（中国)有限公司
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                            
+                            总建筑面积（平方米）
+                        </template>
+                        项目法人单位性质
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                           
+                            标准层建筑面积（平方米）
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                         
+                            计容积率建筑面积(平方米)
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                           
+                            建筑密度(%)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            绿地率(%)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                        
+                            建筑栋数（栋）：
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                      
+                            地上建筑面积(平方米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            地下建筑面积(平方米)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                          
+                            最高建筑层数（层）
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            最高建筑高度(米)
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                         
+                            机动车停车位(辆)
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                   
+                            非机动车停车位(辆)
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                    
+                            防火等级
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">                         
+                            规划文件
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                </el-descriptions>
             </div>
         </div>
-        <div>123</div>
     </div>
 </template>
 
@@ -35,29 +133,37 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
-    gap: 1rem;
 }
-.containertop{
+
+.content {
+    padding: 1rem;
+    display: flex;
+}
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
     padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +175,18 @@
     font-style: normal;
     text-transform: none;
 }
+
+.picturediv {
+    width: 18.31rem;
+    height: 25.31rem;
+    background-color: lightblue;
+}
+.descriptionsdiv{
+    width: 100%;
+    margin-left: 1rem;
+    height: auto;
+}
+.two-row-item{
+    height: 20rem;
+}
 </style>
diff --git a/src/views/components/ProjectDetails/Projectgift.vue b/src/views/components/ProjectDetails/Projectgift.vue
index 84ccb7e..b22354e 100644
--- a/src/views/components/ProjectDetails/Projectgift.vue
+++ b/src/views/components/ProjectDetails/Projectgift.vue
@@ -21,12 +21,36 @@
                 style="border: none;"> 导出</el-button>
             </div>
         </div>
-        <div>123</div>
+        <!-- 图片盒子容器 -->
+        <div class="image-container">
+            <div v-for="(image, index) in images" :key="index" class="image-box">
+                <img :src="image.src" alt="项目图片" class="image">
+                <div class = "close-button" @click="removeImage(index)"> 
+                    <img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-
+export default {
+    data() {
+        return {
+            images: [
+                { src: '' },
+                { src: '' },
+                { src: '' },
+                // 添加更多图片
+            ]
+        };
+    },
+    methods: {
+        removeImage(index) {
+            this.images.splice(index, 1);
+        }
+    }
+};
 </script>
 
 <style scoped>
@@ -35,29 +59,34 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+    padding: 1rem;
     gap: 1rem;
+    overflow: auto;
 }
-.containertop{
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
-    padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +98,38 @@
     font-style: normal;
     text-transform: none;
 }
-</style>
+
+.image-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.image-box {
+    position: relative;
+    width: 21.75rem;
+    height: 12.44rem;
+    background-color: #f0f0f0;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+.image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.close-button {
+    width: 1.25rem;
+    height: 1.25rem;
+    position: absolute;
+    top: 0.2rem;
+    right: 0.2rem;
+}
+.close-button img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/ProjectDetails/Projectpicture.vue b/src/views/components/ProjectDetails/Projectpicture.vue
index 0025e6f..cb9481c 100644
--- a/src/views/components/ProjectDetails/Projectpicture.vue
+++ b/src/views/components/ProjectDetails/Projectpicture.vue
@@ -7,26 +7,160 @@
                 <span>项目画像</span>
             </div>
             <div class="topright">
-                <el-button 
-                type="primary" 
-                icon="el-icon-edit" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导入</el-button>
-                <el-button 
-                type="primary" 
-                icon="el-icon-upload" 
-                size="mini" 
-                plain 
-                style="border: none;"> 导出</el-button>
+                <el-button type="primary" size="mini" plain
+                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
+                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    编辑
+                </el-button>
+                <el-button type="primary" size="mini" plain
+                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
+                    <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
+                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
+                    导出
+                </el-button>
+            </div>
+        </div>
+        <!-- 内容区 -->
+        <div class="content">
+            <div class="picturediv">
+                <div ref="chart" style="width: 30rem; height: 25rem; margin-left: 2rem;"></div>
+            </div>
+            <div class="descriptionsdiv">
+                <el-descriptions class="margin-top" :column="2" :size="size" border>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            总投资额（万元）
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            所属功能区
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            建设起止时间
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            现状分类
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            建设地点
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            重点发展产业
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+
+                            建设模式
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            项目标签
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            项目负责人
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            联系方式
+                        </template>
+                        苏州市
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            施工许可证发放时间
+                        </template>
+                        kooriookami
+                    </el-descriptions-item>
+                    <el-descriptions-item>
+                        <template slot="label">
+                            竣工验收时间
+                        </template>
+                        18100000000
+                    </el-descriptions-item>
+                </el-descriptions>
             </div>
         </div>
-        <div>123</div>
     </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+
+export default {
+    mounted() {
+        this.initChart();
+    },
+    methods: {
+        initChart() {
+            const chartDom = this.$refs.chart;
+            const myChart = echarts.init(chartDom);
+
+            const option = {
+                title: {
+                    text: '',
+                    left: 'center'
+                },
+                tooltip: {},
+                legend: {
+                    data: ['本项目', '中位数']
+                },
+                radar: {
+                    // shape: 'circle',
+                    indicator: [
+                        { name: '总投资额', max: 6500 },
+                        { name: '首层层高', max: 16000 },
+                        { name: '二层及以上楼面荷载', max: 30000 },
+                        { name: '首层地面荷载', max: 38000 },
+                        { name: '二层及以上楼面荷载', max: 52000 },
+                        { name: '层数', max: 25000 }
+                    ]
+                },
+                series: [
+                    {
+                        name: 'Budget vs spending',
+                        type: 'radar',
+                        data: [
+                            {
+                                value: [4200, 3000, 20000, 35000, 50000, 18000],
+                                name: '本项目'
+                            },
+                            {
+                                value: [5000, 14000, 28000, 26000, 42000, 21000],
+                                name: '中位数'
+                            }
+                        ]
+                    }
+                ]
+            };
 
+            myChart.setOption(option);
+        }
+    }
+};
 </script>
 
 <style scoped>
@@ -35,29 +169,37 @@
     flex-direction: column;
     width: 100%;
     background-color: #FFFFFF;
-    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
+    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
     border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
-    gap: 1rem;
 }
-.containertop{
+
+.content {
+    padding: 1rem;
+    display: flex;
+}
+
+.containertop {
     height: auto;
     display: flex;
     justify-content: space-between;
     padding: .7rem 0;
-    border-bottom: 1px solid #E5E5E5;
     padding: .5rem;
+    border-bottom: 1px solid #E5E5E5;
 }
-.topleft{
-    width:8rem ;
+
+.topleft {
+    width: 8rem;
     display: flex;
     gap: 0.4rem;
     align-items: center;
 }
-.topleft img{
+
+.topleft img {
     width: 0.81rem;
     height: 0.81rem;
 }
-.topleft span{
+
+.topleft span {
     width: auto;
     height: 0.88rem;
     font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@@ -69,4 +211,19 @@
     font-style: normal;
     text-transform: none;
 }
+
+.picturediv {
+    width: auto;
+    height: auto;
+}
+
+.descriptionsdiv {
+    width: 52rem;
+    margin-left: 10rem;
+    height: 25.31rem;
+}
+
+.two-row-item {
+    height: 20rem;
+}
 </style>