scancode-miro/pages/lgz/index/unWinPrize.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="/static/images/common/logo.png" mode="aspectFit" />
        </u-col>
        <u-col span="4">
          <image class="commodity-img" src="/static/images/common/commodity.png" mode="aspectFit" />
        </u-col>
        <u-col span="4">

        </u-col>
      </u-row>
    </view>

    <view class="theme-text">
      <image src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/text.png"
             class="textImage"></image>
    </view>
    <!-- 公司简介内容卡片 -->
    <view class="intro-card">
      <view class="intro-view">
        <view class="intro-content">
          <view>
            <image src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/prize/unWinPrize_1.png" mode="heightFix"
                   class="prize_image_1"></image>
          </view>
          <view style="margin: 40rpx;">
            <image src="https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/guzhenganzi/prize/unWinPrize_2.png" mode="heightFix"
                   class="prize_image_2"></image>
          </view>
          <view>{{ randomText }}</view>
        </view>

      </view>

    </view>

    <!-- 返回按钮 -->
    <view class="footer-btn">
    </view>
  </view>
</template>

<script>
import { randomTexts } from '../../../utils/randomTexts.js';
export default {
  data() {
    return {
      randomText: ""
    }
  },
  mounted() {
    this.setRandomText();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    setRandomText() {
      const randomIndex = Math.floor(Math.random() * randomTexts.length);
      this.randomText = randomTexts[randomIndex];
    }
  }
}
</script>

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

.row-class {
  height: 80rpx;
}

.logo-img {
  background-size: cover;
  /* 确保背景图片自适应填充整个容器 */
  background-position: center;
  /* 背景图片居中显示 */
  background-repeat: no-repeat;
  /* 防止背景图重复 */
  height: 42rpx;
  width: 62%;
}

.commodity-img {
  background-size: cover;
  /* 确保背景图片自适应填充整个容器 */
  background-position: center;
  /* 背景图片居中显示 */
  background-repeat: no-repeat;
  /* 防止背景图重复 */
  height: 35rpx;
  width: 100%;
}

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

  .textImage {
    height: 80rpx;
    width: 400rpx;
  }
}

.prize_image_1{
  height: 140rpx;
}

.prize_image_2{
  height: 280rpx
}



.intro-card {
  margin: 0 32rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
  background: rgba(131, 100, 71, 0.5);
  border-radius: 10rpx;


  .intro-view {
    border: 1px solid #341B10;
    padding: 10px;
    margin: 10px;
    position: relative;
    height: 56vh;

    .intro-content {
      font-size: 40rpx;
      color: #5c4322;
      line-height: 1.8;
      margin: 20rpx 0px;
      text-align: center;
      font-weight: 600;
      color: #9B0000;
    }

    .company-img {
      width: 100%;
      height: 260rpx;
      border-radius: 12rpx;
      object-fit: cover;
      margin-top: 10rpx;
      background: #eee;
    }
  }

}


</style>