更改样式

src/layout/supermarket/detali.vue

@@ -2,41 +2,82 @@
   <div id="policyrightcont">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col :span="24" class="infoMess">
-          <el-col :span="24" class="info"> 名称:{{ policyInfo.name }} </el-col>
-          <el-col :span="24" class="info">
-            总分类：{{ policyInfo.totaltype === '0' ? '技术' : policyInfo.totaltype === '1' ? '产品' : policyInfo.totaltype === '2' ? '服务' : 'underdind' }}
-          </el-col>
-          <el-col :span="24" class="info"> 类型名称：{{ policyInfo.product_type_name }} </el-col>
-          <el-col :span="24" class="info"> 单价:{{ policyInfo.price }} </el-col>
-          <el-col :span="24" class="info"> 单位:{{ policyInfo.priceunit }} </el-col>
-          <el-col :span="24" class="infos" v-for="(acm, index) in policyInfo.image" :key="index">
-            <span> 产品图片:</span><span><el-image style="width:100px;height:100px" :src="acm.url"></el-image></span>
-          </el-col>
-
-          <el-col :span="24" class="info"> 产品参数:{{ policyInfo.product_args }} </el-col>
-          <el-col :span="24" class="info">
-            交易方式：{{ policyInfo.business === '0' ? '公用' : policyInfo.business === '1' ? '转让' : policyInfo.business === '2' ? '竞价' : 'underdind' }}
-          </el-col>
-          <el-col :span="24" class="info"> 研发阶段：{{ policyInfo.phase === '0' ? '阶段成果' : policyInfo.phase === '1' ? '最终成果' : 'underdind' }} </el-col>
-          <el-col :span="24" class="info"> 应用领域:{{ policyInfo.field }} </el-col>
-          <el-col :span="24" class="info"> 市场前景:{{ policyInfo.prospect }} </el-col>
-          <el-col :span="24" class="info"> 电子合同:{{ policyInfo.contract }} </el-col>
-          <el-col :span="24" class="info">
-            供/需{{ policyInfo.business === '0' ? '公用' : policyInfo.business === '1' ? '供' : policyInfo.business === '2' ? '需' : 'underdind' }}
+        <el-col :span="24" class="infoTop">
+          <span>详情页面</span>
+        </el-col>
+        <el-col :span="24" class="infoMiddle">
+          <el-col :span="8" class="infoImage">
+            <el-carousel trigger="click" height="400px">
+              <template v-if="policyInfo.image.length > 0">
+                <el-carousel-item v-for="(item, index) in policyInfo.image" :key="index">
+                  <el-image :src="item.url"> </el-image>
+                </el-carousel-item>
+              </template>
+              <template v-if="policyInfo.image.length == 0"><h1 style="text-align:center;line-height:370px;">暂无图片</h1></template>
+            </el-carousel>
           </el-col>
-          <el-col :span="24" class="info"> 服务范围:{{ policyInfo.scope }} </el-col>
-          <el-col :span="24" class="info"> 描述{{ policyInfo.description }} </el-col>
-          <el-col :span="24" class="info"> 知识产权:{{ policyInfo.property }} </el-col>
-          <el-col :span="24" class="info">
-            状态:{{ policyInfo.status === '0' ? '待审核' : policyInfo.status === '1' ? '通过审核' : policyInfo.status === '2' ? '审核拒绝' : 'underdind' }}
+          <el-col :span="14" class="infoRight">
+            <p>{{ policyInfo.name }}</p>
+            <p class="infoType">
+              <span>总分类：</span
+              ><span>{{ policyInfo.totaltype === '0' ? '技术' : policyInfo.totaltype === '1' ? '产品' : policyInfo.totaltype === '2' ? '服务' : '暂无' }}</span>
+              <span>类型名称：</span>
+              <span>{{ policyInfo.product_type_name }}</span>
+            </p>
+            <p class="infoPrice">
+              <span>收费标准：</span><span>{{ policyInfo.price }}元/</span><span>{{ policyInfo.priceunit }}</span>
+            </p>
+            <p class="infoStatus">
+              <span>交易方式：</span
+              ><span>{{ policyInfo.business === '0' ? '公用' : policyInfo.business === '1' ? '转让' : policyInfo.business === '2' ? '竞价' : '暂无' }}</span
+              ><span>状态：</span
+              ><span>{{
+                policyInfo.status === '0' ? '待审核' : policyInfo.status === '1' ? '通过审核' : policyInfo.status === '2' ? '审核拒绝' : '暂无'
+              }}</span>
+            </p>
+            <p class="infoStatus">
+              <span>研发阶段：</span><span>{{ policyInfo.phase === '0' ? '阶段成果' : policyInfo.phase === '1' ? '最终成果' : '暂无' }}</span
+              ><span>供/需：</span
+              ><span>{{ policyInfo.business === '0' ? '公用' : policyInfo.business === '1' ? '供' : policyInfo.business === '2' ? '需' : '暂无' }}</span>
+            </p>
+            <p class="infoType">
+              <span>联系人：</span><span>{{ policyInfo.contact_user }}</span
+              ><span>联系电话：</span><span>{{ policyInfo.contact_tel }}</span>
+            </p>
           </el-col>
-          <!-- <el-col :span="24" class="info"> 是否删除:{{ policyInfo.is_del === '0' ? '否' : policyInfo.is_del === '1' ? '是' : 'underdind' }} </el-col> -->
-          <el-col :span="24" class="info"> 联系人:{{ policyInfo.contact_user }} </el-col>
-          <el-col :span="24" class="info"> 联系电话:{{ policyInfo.contact_tel }} </el-col>
-          <el-col :span="24" class="info"> 简介:{{ policyInfo.introduction }} </el-col>
         </el-col>
-        <el-col :span="24" class="topInfo"> <el-button type="primary" @click="onSubmit">立即创建</el-button></el-col>
+        <el-col :span="24" class="infoDown">
+          <el-form label-width="150px">
+            <el-form-item label="应用领域：">
+              <span>{{ policyInfo.field }}</span>
+            </el-form-item>
+            <el-form-item label="市场前景：">
+              <span>{{ policyInfo.prospect }}</span>
+            </el-form-item>
+            <el-form-item label="电子合同：">
+              <span>{{ policyInfo.contract }}</span>
+            </el-form-item>
+            <el-form-item label="服务范围：">
+              <span>{{ policyInfo.scope }}</span>
+            </el-form-item>
+            <el-form-item label="描述：">
+              <span>{{ policyInfo.description }}</span>
+            </el-form-item>
+            <el-form-item label="知识产权：">
+              <span>{{ policyInfo.property }}</span>
+            </el-form-item>
+            <el-form-item label="简介：">
+              <span>{{ policyInfo.introduction }}</span>
+            </el-form-item>
+            <el-form-item label="产品参数：">
+              <el-table :data="policyInfo.product_args" border style="width: 800px">
+                <el-table-column prop="arg_name" label="参数名称"> </el-table-column>
+                <el-table-column prop="memo" label="参数内容"> </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="4" class="infoButton"> <el-button @click="onSubmit">立即创建</el-button></el-col>
       </el-col>
     </el-row>
   </div>
@@ -45,9 +86,7 @@
 <script>
 export default {
   name: 'policyrightcont',
-  props: {
-    policyInfo: null,
-  },
+  props: { policyInfo: null },
   components: {},
   data: () => ({}),
   created() {},
@@ -66,44 +105,104 @@ p {
   padding: 0;
   margin: 0;
 }
-.info {
-  padding: 10px 0 10px 20px;
-}
-.infos {
-  height: 120px;
+.infoTop {
+  height: 60px;
+  border-bottom: 1px solid #22529a;
 }
-.topInfo {
+.infoTop span:only-child {
+  width: 15%;
   height: 60px;
+  background-color: #22529a;
+  color: #fff;
+  text-align: center;
   line-height: 60px;
-  font-size: 22px;
+  font-size: 20px;
+  display: block;
+}
+.infoMiddle {
+  margin: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px dashed #ccc;
+}
+.infoImage {
+  width: 40%;
+}
+.infoImage .el-image {
+  width: 100%;
+  height: 100%;
+}
+.infoRight {
+  float: right;
+  font-family: 微软雅黑;
+  color: rgba(1, 1, 1, 0.7);
+}
+.infoRight p:first-child {
+  font-size: 25px;
+  margin: 20px 0 30px 0;
 }
-.infoMess .title {
-  line-height: 30px;
+.infoType {
+  font-size: 20px;
+}
+.infoType span:first-child {
+  font-weight: bolder;
+}
+.infoType span:nth-child(2) {
+  display: inline-block;
+  width: 35%;
+}
+.infoType span:nth-child(3) {
+  font-weight: bolder;
+}
+.infoPrice {
+  background-color: rgba(1, 1, 1, 0.1);
+  line-height: 60px;
+  margin: 30px 0 30px 0;
+  width: 600px;
+  padding: 0 30px;
+  font-size: 28px;
+  color: #fe0000;
+}
+.infoPrice span:first-child {
+  color: rgba(1, 1, 1, 0.7);
+  font-size: 18px;
+}
+.infoStatus {
+  margin: 30px 0 30px 0;
+}
+.infoStatus span:nth-child(2) {
+  display: inline-block;
+  width: 35%;
+}
+.infoDown {
+  margin: 10px 20px;
+}
+/deep/.el-form-item__label {
+  color: rgba(1, 1, 1, 0.7);
+  font-size: 18px;
+}
+/deep/.el-form-item__content {
+  color: rgba(1, 1, 1, 0.7);
+  font-size: 18px;
+}
+/deep/.el-table th {
+  background-color: #f3f3f3;
+  color: rgba(1, 1, 1, 0.5);
+  font-size: 18px;
   text-align: center;
-  font-size: 16px;
-  font-weight: bold;
-  color: #000000;
-  margin: 0 0 20px 0;
-}
-.infoDate {
-  height: 36px;
-  line-height: 36px;
-}
-.infoDate p {
-  width: 700px;
-  background: #eeeeee;
-  margin: 0 105px;
-}
-.infoDate p span {
-  font-size: 14px;
-  color: #000;
-  padding: 0 0 0 80px;
-}
-.infoMess .image {
+}
+/deep/.el-table td {
+  color: rgba(1, 1, 1, 0.7);
+  font-size: 18px;
   text-align: center;
-  margin: 20px 0 0 0;
 }
-.content {
-  padding: 0px 0 20px 0;
+.infoButton {
+  margin: 20px auto;
+  float: none;
+}
+/deep/.el-button {
+  width: 100px;
+  background-color: #22529a;
+  border-radius: 0;
+  color: white;
 }
 </style>