king
2019-09-17 bf78e38e638c1488de680f2a193b6d20e93361ff
src/views/successCase/successCase.vue
@@ -23,16 +23,30 @@
          <span v-text="item.dTitle1"></span>
        </div>
        <div class="content">
          <div class="contnt-describe" :id="index">
          <div class="contnt-describe" :id="index + 'box'">
            <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;">
            <div :id="index + 'box' + 'img'" :class="index % 2 === 1 ? 'left' : 'right'" style="text-align: center;">
              <img :src="item.Images" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper dynamic_b" v-if="data">
      <p v-if="data.LastTitle">
        <span :style="data.LastID && 'cursor:pointer;'" @click="jumpmenu(data.LastID)">
          上一篇:{{data.LastTitle}}
          <span class="tip" v-text="data.lastTip"></span>
        </span>
      </p>
      <p v-if="data.NextTitle">
        <span :style="data.NextID && 'cursor:pointer;'" @click="jumpmenu(data.NextID)">
          下一篇:{{data.NextTitle}}
          <span class="tip" v-text="data.nextTip"></span>
        </span>
      </p>
    </div>
  </div>
</template>
@@ -42,10 +56,21 @@
  data () {
    return {
      product: null,
      details: null
      details: null,
      data: null
    }
  },
  watch: {
    $route () {
      this.menuId = this.$route.params.menuId
      this.load()
    }
  },
  methods: {
    jumpmenu (menuId) {
      if (!menuId || !this.data.PageType) return
      this.$router.push({name: this.data.PageType.toLowerCase(), params: {menuId: menuId}})
    },
    load () {
      let param = {
        func: 'Web_SuccessCaseIndex_GetData',
@@ -58,7 +83,48 @@
          industry: res.Industry,
          time: res.CompletedTime
        }
        let lastTip = res.LastIndustry
        if (lastTip && res.LastPlace) {
          lastTip += ' | ' + res.LastPlace
        } else {
          lastTip += res.LastPlace
        }
        if (lastTip && res.LastCompletedTime) {
          lastTip += ' | ' + res.LastCompletedTime
        } else {
          lastTip += res.LastCompletedTime
        }
        let nextTip = res.NextIndustry
        if (nextTip && res.NextPlace) {
          nextTip += ' | ' + res.NextPlace
        } else {
          nextTip += res.NextPlace
        }
        if (nextTip && res.NextCompletedTime) {
          nextTip += ' | ' + res.NextCompletedTime
        } else {
          nextTip += res.NextCompletedTime
        }
        this.data = {
          lastTip: lastTip,
          LastID: res.LastID,
          LastTitle: res.LastTitle,
          NextID: res.NextID,
          NextTitle: res.NextTitle,
          nextTip: nextTip,
          PageType: res.PageType
        }
        this.details = res.SuccessCase
        this.$nextTick(() => {
          if (document.body.clientWidth < 750) return
          this.details.forEach((item, index) => {
            let boxheight = document.getElementById(index + 'box').offsetHeight - 40
            document.getElementById(index + 'boximg').style['line-height'] = boxheight + 'px'
          })
        })
      })
    }
  },
@@ -135,6 +201,22 @@
    margin:0.72rem 0 2.88rem;
  }
  @media (min-width: 751px) {
    .wrapper {
      margin-bottom: 0.4rem;
    }
    .dynamic_b {
      padding: 0;
      margin-bottom: 0.5rem;
      p {
        margin: .1rem 0;
        span.tip {
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: rgba(175,173,173,1);
          margin-left: 0.2rem;
        }
      }
    }
    .content22 {
      margin-bottom: 0.5rem;
    }
@@ -174,7 +256,7 @@
    }
    .contnt-describe {
      float: left;
      padding: .1rem .2rem 0.3rem;
      padding: .2rem .2rem;
      margin-bottom: .2rem;
      .left {
        float: left;
@@ -200,6 +282,7 @@
    }
    .content_title {
      text-align: center;
      margin: .4rem 0 .5rem;
      span {
        display: inline-block;
        border-bottom: 0.02rem solid;
@@ -219,10 +302,19 @@
    }
    .contnt-describe img {
      display: inline-block;
      margin-top: 0.1rem;
      // margin-top: 0.1rem;
    }
  }
  @media (max-width: 750px) and (min-width: 0) {
    .dynamic_b {
      padding: 0.6rem 0.32rem 0.4rem;
      p {
        margin-bottom: 0.2rem;
      }
      span.tip {
        display: none;
      }
    }
    .p_txt2 {
      width: 4rem;
      margin: 0 auto;