scancode-miro/pages/xhc/error.vue

<template>
  <view class="intro-page common">
    <view class="top-class"></view>
    <view class="title">
      <view class="logo-container">
        <image class="logo-text"  src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/logo.png"  />
      </view>
      <view class="title-1">
        <view class="title-image"></view>
      </view>
    </view>
    <view class="head">
      <image class="logo-rules" @click="openDetail" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/rules.png"  />
    </view>
    <view class="head-ttile">
      <view class="head-ttile-img">
        <image class="ttile-img" src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/xhc/common/bgi_3.png" mode="heightFix"/>
      </view>
      <view class="head-ttile-text">
        正宗海南·醇香浓郁
      </view>
    </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_xhc.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{
  border-radius: 10rpx;
  padding: 10rpx;
  margin: 30vh 40rpx 20rpx;
  height: 20vh;
  background: #FDE2B1;
  border: 4px solid #FB911B;
}
.text-detail{
  font-weight: 500;
  font-size: 28rpx;
  color: #000000;
  margin-bottom: 10rpx;
  padding: 20rpx;
}

.text-one{
  font-weight: 400;
  font-size: 26rpx;
  color: #901710 ;
  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>