scancode-miro/pages/cjx/error.vue

<template>
  <view class="intro-page common">
    <view class="top-class"></view>
    <view class="title">
      超吉炫
    </view>
    <view class="head">
      <u-row class="row-class">
        <u-col span="4">
          <image class="logo-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/logo.png" mode="aspectFit" />
        </u-col>
        <u-col span="4">
          <image class="commodity-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/commodity.png" mode="aspectFit" />
        </u-col>
        <u-col span="4">
          <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/rules.png"  />
        </u-col>
      </u-row>
    </view>

    <view class="topImg">
      <image class="img_1" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg.png" mode="heightFix" />
    </view>
    <view class="topImg">
      <image class="img_2" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/topImg_2.png" mode="heightFix" />
    </view>
    <view class="content">
      <view class="title-1">

      </view>

      <view class="detail">
        <view class="text-detail">
          您所查询的是超吉炫新型低纤槟榔胶果，是正牌产品，感谢您的购买!
        </view>
        <view class="text-one">
        </view>
        <view class="text-one">
          {{msg}}
        </view>
      </view>
    </view>
    <CustomTabbar />

  </view>
</template>

<script>
export default {

  data() {
    return {
      msg: "未知错误"
    }
  },
  onLoad: function(options) {
    if (options.msg){
      this.msg = options.msg;
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
	@import url('../../static/scss/common_cjx.css');

.row-class {
  height: 80rpx;
}

.theme-text {
  height: 10vh;
  text-align: center;
  line-height: 11vh;

  .textImage {
    height: 80rpx;
    width: 400rpx;
  }
}
.title-1{
  text-align: center;
  color: #A7001C;
  font-size: 18px;
  letter-spacing: 4px;
  font-weight: 600;
}

.winning-picture{
  height: 460rpx;
  background-image: url(https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/bgiZj.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center; /* 水平居中 */
  // align-items: center;     /* 垂直居中 */
}
.detail{
  margin: 20rpx 40rpx;
  border-radius: 10rpx;
  padding: 10rpx;
  margin-top: 30vh;
  background-image:
      url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/cardBgi.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.text-detail{
  font-weight: 500;
  font-size: 28rpx;
  color: #F6F6F9;
  margin-bottom: 10rpx;
  padding: 20rpx;
}

.text-one{
  font-weight: 400;
  font-size: 26rpx;
  color: #FF31C2 ;
  margin-bottom: 10rpx;
  padding: 20rpx;

}
.detail-btn{
  text-align: center;
  color: #F9D395;
  height: 60rpx;
  line-height: 60rpx;
  margin-right: 20rpx;
  font-size: 13px;
  background-color: #901710;
  padding: 3px;
  border-radius: 5px;

}
.center-image {
  height: 280rpx;
  object-fit: contain;     /* 保持图片的宽高比，确保不会被拉伸或裁切 */
}
::v-deep .detail-btn span {
  background-color: #8E1813;
  padding: 4rpx;
  border-radius: 8rpx;
  font-weight: 400;
  font-size: 26rpx;
}
</style>