应用详情信息页面

src/components/application-info.vue

 <template>
   <div class="application_info" v-if="data">
-    <div class="application_title">
-      <span class="application_name" v-text="data.name"></span>
-    </div>
     <div class="main_container">
       <div class="main_container-left" v-if="data.img">
-        <img :src="data.img" width="460" />
+        <el-avatar shape="square" :size="144" fit="cover" :src="data.img" />
       </div>
       <div class="main_container-right">
-        <ul class="application_base_info">
-          <li>
-            <span>应用开发者：</span>
-            <span v-text="data.providedBy"> </span>
-          </li>
-          <li>
-            <span>上线时间：</span>
-            <span v-text="data.publishTime"></span>
-          </li>
-          <li>
-            <span>部署次数：</span>
-            <span v-text="data.acquireCount"></span>
-          </li>
-          <li>
-            <span>应用类型：</span>
-            <span v-html="data.serviceType"></span>
-          </li>
-          <li>
-            <span>业务领域：</span>
-            <span v-text="data.dataField"></span>
-          </li>
-        </ul>
-        <div class="commodity_information">
-          <span>规&emsp;&emsp;格：</span>
-          <div class="btn_container">
-            <el-button
-              v-for="(item, index) in data.specifications"
-              :key="'specifications_' + index"
-              :type="
-                item.value === commodityData.specification
-                  ? 'primary'
-                  : 'default'
-              "
-              @click="changeSpecification(item)"
-            >
-              {{ item.name }}
-            </el-button>
-          </div>
+        <div class="application_title">
+          <span class="application_name" v-text="data.name"></span>
         </div>
-        <div class="commodity_action">
-          <el-button type="warning" plain @click="addToCart">
-            加入购物车
-          </el-button>
-          <el-button type="warning" @click="applyImmediately">
-            立即申请
-          </el-button>
+        <div class="application_base_container">
+          <ul class="application_base_info">
+            <li>
+              <span>应用开发者：</span>
+              <span v-text="data.providedBy"> </span>
+            </li>
+            <li>
+              <span>应用类型：</span>
+              <span v-html="data.serviceType"></span>
+            </li>
+          </ul>
+          <ul class="application_base_info">
+            <li>
+              <span>部署次数：</span>
+              <span v-text="data.acquireCount"></span>
+            </li>
+            <li>
+              <span>业务领域：</span>
+              <span v-text="data.dataField"></span>
+            </li>
+          </ul>
+          <ul class="application_base_info">
+            <li>
+              <span>上线时间：</span>
+              <span v-text="data.publishTime"></span>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
+    <div class="commodity_information">
+      <span>规&emsp;&emsp;格：</span>
+      <div class="btn_container">
+        <el-button
+          v-for="(item, index) in data.specifications"
+          :key="'specifications_' + index"
+          :type="
+            item.value === commodityData.specification ? 'primary' : 'default'
+          "
+          @click="changeSpecification(item)"
+        >
+          {{ item.name }}
+        </el-button>
+      </div>
+    </div>
+    <div class="commodity_action">
+      <el-button type="warning" plain @click="addToCart">
+        加入购物车
+      </el-button>
+      <el-button type="warning" @click="applyImmediately">
+        立即申请
+      </el-button>
+    </div>
   </div>
 </template>
 
@@ -73,13 +77,6 @@ export default {
       specification: 0,
     },
   }),
-  computed: {
-    specificationDescription() {
-      let obj =
-        this.data.specifications[this.commodityData.specification] || {};
-      return obj.description || "";
-    },
-  },
   methods: {
     changeSpecification({ value }) {
       this.commodityData.specification = value;
@@ -111,28 +108,29 @@ export default {
 .main_container-left {
   padding: 3px;
   background-color: #f9fafc;
-  margin-right: 30px;
+  margin-right: 10px;
 }
 .main_container-right {
   flex-grow: 1;
 }
-.application_title {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
 .application_title > .application_name {
   font-size: 22px;
   font-weight: bold;
   color: #0d1847;
   line-height: 36px;
 }
-.application_base_info {
-  padding: 18px;
+.application_base_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
   background-color: #f9fafc;
+  padding: 18px;
+  margin-top: 15px;
 }
-.application_base_info > li,
-.commodity_information {
+.application_base_info:not(:last-child) {
+  margin-right: 50px;
+}
+.application_base_info > li {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -140,39 +138,37 @@ export default {
   color: #242c43;
   line-height: 20px;
 }
-.application_base_info > li:not(:first-child) {
-  margin-top: 18px;
-}
-.application_base_info > li > span:first-child,
-.commodity_information > span:first-child {
+.application_base_info > li > span:first-child {
+  width: 6em;
   flex-shrink: 0;
   white-space: nowrap;
   color: #8890a7;
+  text-align: right;
+}
+.application_base_info > li:not(:first-child) {
+  margin-top: 20px;
 }
 .application_base_info > li > span:nth-child(2) {
   color: #242c43;
 }
 .commodity_information {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
   margin-top: 30px;
 }
-.commodity_information > span:nth-child(2) {
-  color: #58617a;
-}
 .commodity_information > span:first-child {
+  flex-shrink: 0;
+  width: 6em;
+  font-size: 14px;
+  color: #8890a7;
   line-height: 40px;
 }
-.commodity_information > .commodity_text {
-  flex-grow: 1;
-  padding: 13px 18px;
-  background-color: #f9fafc;
-  border-radius: 5px;
-}
 .commodity_information > .btn_container {
   margin-bottom: -15px;
 }
-.commodity_information > .btn_container > .el-button,
-.commodity_information > .btn_container > .el-input-number {
-  margin: 0 20px 15px 0;
+.commodity_information > .btn_container > .el-button {
+  margin: 0 30px 15px 0;
 }
 .commodity_action {
   margin-top: 50px;

src/pages/sjfwDetail.vue

@@ -34,6 +34,11 @@ export default {
     specification: null,
     provider: null,
   }),
+  computed: {
+    id() {
+      return this.$route.params.id;
+    },
+  },
   methods: {
     getDataFromApi(_url) {
       return new Promise((resolve, reject) => {

src/pages/skfwDetail.vue

@@ -31,6 +31,11 @@ export default {
   data: () => ({
     baseInfo: null,
   }),
+  computed: {
+    id() {
+      return this.$route.params.id;
+    },
+  },
   methods: {
     getDataFromApi(_url) {
       return new Promise((resolve, reject) => {

src/pages/yysdDetail.vue

@@ -35,6 +35,11 @@ export default {
     specification: null,
     provider: null,
   }),
+  computed: {
+    id() {
+      return this.$route.params.id;
+    },
+  },
   methods: {
     getDataFromApi(_url) {
       return new Promise((resolve, reject) => {

src/pages/zhyyfwDetail.vue

@@ -31,6 +31,11 @@ export default {
   data: () => ({
     baseInfo: null,
   }),
+  computed: {
+    id() {
+      return this.$route.params.id;
+    },
+  },
   methods: {
     getDataFromApi(_url) {
       return new Promise((resolve, reject) => {