web-website/src/layout/supermarket/detali.vue

<template>
  <div id="policyrightcont">
    <el-row>
      <el-col :span="24" class="info">
        <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 && 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 && policyInfo.image.length == 0"><h1 style="text-align:center;line-height:370px;">暂无图片</h1></template>
            </el-carousel>
          </el-col>
          <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>
        <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>
</template>

<script>
export default {
  name: 'policyrightcont',
  props: { policyInfo: { type: Object, required: true, default: () => {} } },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {
    onSubmit() {
      console.log(this.policyInfo);
      this.$emit('onSubmit', this.policyInfo);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.infoTop {
  height: 60px;
  border-bottom: 1px solid #22529a;
}
.infoTop span:only-child {
  width: 15%;
  height: 60px;
  background-color: #22529a;
  color: #fff;
  text-align: center;
  line-height: 60px;
  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;
}
.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;
}
/deep/.el-table td {
  color: rgba(1, 1, 1, 0.7);
  font-size: 18px;
  text-align: center;
}
.infoButton {
  margin: 20px auto;
  float: none;
}
/deep/.el-button {
  width: 100px;
  background-color: #22529a;
  border-radius: 0;
  color: white;
}
</style>