share_h5/pages/works.vue

<template>
  <view class="details" v-if="opusInfo">
  
    <!-- 头部图片 -->
    <swiper
      class="swiper"
      indicator-dots="true"
      autoplay="true"
      interval="5000"
      duration="1500"
      circular="true"
    >
      <swiper-item v-if="opusInfo.opus_type == 1">
        <video :src="opusInfo.media_address" style="width: 100%"></video>
      </swiper-item>
      <swiper-item v-for="(item, index) in imglist" :key="index">
        <image :src="item" mode="aspectFill" style="width: 100%"></image>
      </swiper-item>
    </swiper>
    <!-- <view class="top-image">
			<image src="@/static/delImg/banenr.png" mode=""></image>
		</view> -->
    <view class="title">
      {{ opusInfo.title }}
    </view>
    <!-- 标题 -->
    <view class="three-even">
      <view class="item">
        <view class="good">
          <image src="@/static/good.png" mode=""></image>
          <view class="num">
            {{ opusInfo.like_num }}
          </view>
        </view>
        <view class="message" >
          <image src="@/static/message.png" mode=""></image>
          <view class="num">
            {{ opusInfo.comment_sum }}
          </view>
        </view>
        <view class="link">
          <image src="@/static/link.png" mode=""></image>
          <view class="num">
            {{ opusInfo.share_sum }}
          </view>
        </view>
      </view>
    </view>
    <!-- 个人信息 -->
    <view class="personal">
      <view class="item">
        <image :src="opusInfo.head_photo" mode=""></image>
        <view class="name-time">
          <view class="name">
            {{ opusInfo.nickname }}
          </view>
          <view class="time">
            {{ opusInfo.create_time }}
          </view>
        </view>
        <view class="follow-button"> +关注 </view>
      </view>
    </view>
    <!-- 简介 -->
    <view class="introduce">
      <view class="top">
        <view class="simple">
          <view class="line"> </view>
          <view class="item"> 简介 </view>
        </view>
        <view class="simple-content">
          {{ opusInfo.content }}
        </view>
      </view>
    </view>
      <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <view class="u-flex-center">
         <button class="buy-btn u-DCCDA4 u-font30" @click="open(0)">
            查看更多
          </button> <button class="buy-btn u-DCCDA4 u-font30" @click="open(1)">
           下载App
          </button>
        </view>
      </view>
    </view>
   

 
  </view>
</template>

<script>
export default {
  data() {
    return {
      config: {
        back: true, //false是tolbar页面 是则不写
        title: "文章详情",
        color: "#fff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, "#00321E"],
        statusBarFontColor: "#ffffff",
      },
      opusInfo: null,
      goodIndex: 2,
      imglist: [],
      content: null,
    };
  },
   props: {
    options: {
      type: Object,
      default: null,
    },
  },
  watch: {
    options(n) {
 
      this.options = n;
       this.getDetail(this.options.id);
    },
  },
  created() {
 
    this.getDetail(this.options.id);
  },
  methods: {
 
    getDetail(id) {
      this.$http.get("/opus/info/" + id).then((res) => {
        if (res && res.code == 200) {
          this.opusInfo = res.data;
          this.imglist = res.data.images.split(",");
        }
      });
    },
  open(){
     if(number==0){
   window.location.href =
      "lida://&pageType=3&type=" + this.type + "&id=" +  this.opusInfo.id+"&shareId="+this.options.shareId;
     }else{
   //'lida://;
    
     uni.navigateTo({
     	url:"/pages/down"
     })
     }
  },
    
   
  },
};
</script>

<style lang="scss" scoped>
.bottom-btn .buy-btn{
width: 340px;
    height: 42px;
    line-height: 42px;
    background: #00321e;
    border-radius: 21px;
}
.show-bottom {
  background-color: #ffffff;
  border-radius: 50rpx 50rpx 0 0;
  padding: 37rpx 30rpx 22rpx 30rpx;
  .input {
    .texterea-item {
      background-color: #fafafa;
      padding: 22rpx 20rpx;
      border-radius: 21rpx;
      margin: 22rpx 29rpx 4rpx 30rpx;
    }
  }

  .top {
    display: flex;
    align-items: center;

    .line {
      width: 6rpx;
      height: 26rpx;
      background-color: #00321e;
      border-radius: 3rpx;
    }

    .item {
      font-size: 36rpx;
      color: #1a1a1a;
      font-weight: 700;
      margin-left: 14rpx;
      flex: 1;
    }

    .deter-mine {
      font-size: 30rpx;
      font-weight: 500;
      color: #1a1a1a;
    }
  }
}

.stay-msg {
  .title-top {
    font-size: 36rpx;
    font-weight: 700;
    color: #1a1a1a;
    padding: 28rpx 0 31rpx 32rpx;
  }

  .character {
    display: flex;
    margin-bottom: 40rpx;

    .image {
      margin-left: 32rpx;
      margin-right: 18rpx;

      image {
        width: 83rpx;
        height: 83rpx;
      }
    }

    .item {
      .top {
        font-size: 28rpx;
        font-weight: 400;
        color: #1a1a1a;
      }

      .time {
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
      }
    }
  }

  .character:nth-child(odd) {
    .content {
      font-size: 28rpx;
      font-weight: 500;
      color: #1a1a1a;
      margin-top: 15rpx;
    }
  }

  .character:nth-child(even) {
    .content {
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
      margin-top: 15rpx;
    }
  }
}

.recommend {
  width: 750rpx;
  padding-bottom: 40rpx;
  border-bottom: 10rpx solid #f5f5f5;

  .recommend-item {
    width: 720rpx;
    margin: 0 auto;

    .see-more {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      color: #999999;
      font-weight: 400;

      .linge {
        margin-left: 9rpx;
      }
    }
  }

  .componen-titem {
    margin: 0 auto;
    display: flex;
    padding: 30rpx 39rpx;

    .img {
      image {
        width: 139rpx;
        height: 139rpx;
      }
    }

    .item {
      margin-left: 19rpx;
      padding-right: 39rpx;
      width: 100%;
      .item-title {
        color: #1a1a1a;
        font-size: 24rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
      }

      .num {
        margin-top: 18rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .num-color {
          color: #ff0000;

          .large {
            font-size: 38rpx;
            font-weight: 700;
          }

          .small {
            font-size: 20rpx;
            font-weight: Regular;
          }
        }
      }

      .button {
        padding: 12rpx 35rpx 11rpx 35rpx;
        background-color: #00321e;
        border-radius: 32rpx;
        color: #d5c49b;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
  }
}

.introduce {
  padding: 40rpx 19rpx 40rpx 30rpx;
  border-bottom: 8rpx solid #f5f5f5;

  .practice {
    margin-top: 34rpx;

    .practice-item {
      display: flex;
      align-items: center;

      .simple {
        width: 6rpx;
        height: 26rpx;
        background: #00321e;
        border-radius: 3rpx;
      }

      .practice-details {
        font-size: 28rpx;
        font-weight: 700;
        color: #1a1a1a;
        margin-left: 16rpx;
      }
    }

    .introduction-details {
      margin-top: 19rpx;
      font-size: 24rpx;
      color: #666666;
      font-weight: 500;
      text-align: left;

      .item {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  .middle {
    margin-top: 34rpx;

    .middle-item {
      display: flex;
      align-items: center;

      .simple {
        width: 6rpx;
        height: 26rpx;
        background-color: #00321e;
        border-radius: 3rpx;
      }

      .material {
        font-size: 28rpx;
        font-weight: 700;
        color: #1a1a1a;
        margin-left: 16rpx;
      }
    }

    .item-block {
      margin-top: 19rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #666;
      line-height: 38rpx;
    }
  }

  .top {
    .simple-content {
      color: #666666;
      font-weight: 400;
      font-size: 24rpx;
      margin-top: 19rpx;
    }

    .simple {
      display: flex;
      align-items: center;

      .line {
        width: 6rpx;
        height: 26rpx;
        line-height: 26rpx;
        background-color: #00321e;
        border-radius: 3rpx;
      }

      .item {
        margin-left: 16rpx;
        font-size: 28rpx;
        font-weight: 700;
        color: #1a1a1a;
      }
    }
  }
}

.personal {
  border-bottom: 8rpx solid #f5f5f5;

  .item {
    display: flex;
    margin: 28rpx 30rpx 40rpx 30rpx;

    .follow-button {
      margin-top: 12rpx;
      color: #00321e;
      font-size: 28rpx;
      font-weight: 400;
      padding: 10rpx 26rpx;
      background-color: rgba(218, 198, 161, 1);
      border-radius: 18rpx;
      height: 40rpx;
      line-height: 40rpx;
    }

    .name-time {
      margin-left: 18rpx;
      flex: 1;

      .name {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #1a1a1a;
        font-weight: 400;
        opacity: 1;
        letter-spacing: -1rpx;
        margin-bottom: 10rpx;
      }

      .time {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 33rpx;
        color: #999999;
        opacity: 1;
      }
    }

    image {
      width: 83rpx;
      height: 83rpx;
    }
  }
}

.three-even {
  margin: 0 auto;

  .item {
    display: flex;
    width: 690rpx;
    margin: 0 30rpx;
    padding-bottom: 45rpx;
    border-bottom: 1rpx solid #e6e6e6;

    .link {
      display: flex;

      image {
        width: 39rpx;
        height: 37rpx;
        margin-left: 44rpx;
      }

      .num {
        margin-left: 11rpx;
        color: #999;
      }
    }

    .message {
      display: flex;

      image {
        margin-left: 44rpx;
        width: 38rpx;
        height: 30rpx;
      }

      .num {
        margin-left: 11rpx;
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
      }
    }

    .good {
      display: flex;

      image {
        width: 37rpx;
        height: 37rpx;
      }

      .num {
        margin-left: 17rpx;
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
      }
    }
  }
}

.title {
  margin: 33rpx 36rpx 18rpx 10rpx;
  padding-left: 16rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.top-image {
  width: 750rpx;
  height: 584rpx;

  image {
    width: 750rpx;
    height: 584rpx;
  }
}
</style>