news

king

2019-08-23 4deda573bfc6663c1793b29f60a6e1035d891520

 src/views/successCase/successCase.vue

@@ -10,11 +10,30 @@
      <img src="../../img/anli2.jpg" alt="">
    </div>
    <div class="wrapper">
      <div class="content_title">
        <span>中石油</span>
        <p>项目实施落地: 北京 <label style="margin:0 0.05rem;">行业: 能源行业</label> 时间: 2012年3月</p>
      <div class="content_title" v-if="product">
        <span v-text="product.name"></span>
        <p>
          <label v-if="product.place">项目实施落地: {{product.place}} </label>
          <label style="margin:0 0.05rem;" v-if="product.industry">行业: {{product.industry}}行业</label>
          <label v-if="product.time"> 时间: {{product.time}}</label>
        </p>
      </div>
      <div class="content">
      <div v-for="(item, index) in details" :key="index">
        <div class="content_title" v-if="item.dTitle1">
          <span v-text="item.dTitle1"></span>
        </div>
        <div class="content">
          <div class="contnt-describe" :id="index">
            <div :class="index % 2 === 0 ? 'left' : 'right'" style="padding-top: 0.2rem;">
              <p v-for="(cell, i) in item.SuccessCaseDetail" :key="i" :class="cell.oTitle1 && 'h3'" v-text="cell.oTitle1 || cell.LongText"></p>
            </div>
            <div :class="index % 2 === 1 ? 'left' : 'right'" style="text-align: center;">
              <img :src="item.Images" alt="">
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="content">
        <div class="contnt-describe">
          <div class="left">
            <h3>企业背景</h3>
@@ -81,7 +100,7 @@
            </div>
          </div>
        </div>
      </div>
      </div> -->
    </div>
  </div>
</template>
@@ -90,12 +109,30 @@
export default {
  data () {
    return {

      product: null,
      details: null
    }
  },
  methods: {
    load () {
      let param = {
        func: 'Web_SuccessCaseIndex_GetData',
        ID: this.menuId
      }
      this.Service.getParamData(param).then(res => {
        this.product = {
          name: res.Title1,
          place: res.Place,
          industry: res.Industry,
          time: res.CompletedTime
        }
        this.details = res.SuccessCase
      })
    }
  },
  mounted () {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    this.menuId = this.$route.params.menuId
    this.load()
  }
}
</script>
@@ -105,7 +142,7 @@
    margin: 0.6rem 0 0.5rem;
    p {
      color: #838383;
      font-size: .16rem;
      font-size: .24rem;
      text-align: center;
      margin-top: .26rem;
    }
@@ -128,8 +165,12 @@
      text-align: left;
      font-size: .16rem;
      line-height: 0.25rem;
      margin-bottom: .2rem;
      margin-bottom: .1rem;
      margin-left: 0.25rem;
    }
    p.h3 {
      font-size: 0.3rem;
      margin: 0rem 4% 0.2rem;
    }
  }
  .content:nth-child(2) {
@@ -211,10 +252,18 @@
          display: inline-block;
          padding-top: .3rem;
        }
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      .right {
        float: right;
        width: 50%;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
    .content_title {
@@ -222,6 +271,9 @@
      span {
        display: inline-block;
        border-bottom: 0.02rem solid;
      }
      p {
        font-size: .16rem;
      }
    }
    .content_title > span::after {
@@ -239,9 +291,6 @@
    }
  }
  @media (max-width: 750px) and (min-width: 0) {
    .shiyou {
      width: 4.6rem;
    }
    .p_txt2 {
      width: 4rem;
      margin: 0 auto;
@@ -270,17 +319,25 @@
      margin: 0.2rem 0;
    }
    .contnt-describe {
      padding: 0.3rem 0.32rem 0.8rem;
      padding: 0rem 0.32rem 0.8rem;
      p {
        font-size: 0.24rem;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(62,62,62,1);
        line-height: 0.44rem;
        margin-left: 0rem;
      }
      .left {
        padding-top: 0.2rem;
      }
      .right {
        padding-right: 0 !important;
        margin-top: 0.3rem !important;
        padding-top: 0.2rem;
      }
      p.h3 {
        font-size: 0.3rem;
        margin-left: 0;
      }
    }
    .header {