wydy/wy-mobile/pages/vote-notice.vue

<template>
  <view class="container">
    <!-- 顶部标题区 -->
    <view class="header">
      <text class="main-title">选聘调研投票须知</text>
      <view class="subtitle-box">
        <text class="subtitle">物业事</text>
        <text class="subtitle split">|</text>
        <text class="subtitle">业主定</text>
      </view>
    </view>

    <!-- 须知内容区 -->
    <view class="notice-card">
      <view class="notice-item">
        <view class="item-number">1</view>
        <text class="item-text">1户1票，多投无效。</text>
      </view>
      
      <view class="notice-item">
        <view class="item-number">2</view>
        <text class="item-text">需持证业主身份证后四位提交投票。</text>
      </view>
      
      <view class="notice-item">
        <view class="item-number">3</view>
        <text class="item-text">征求意见共有4个选项，只能选择一个投票。</text>
      </view>
      
      <view class="notice-item">
        <view class="item-number">4</view>
        <text class="item-text">根据《中华人民共和国民法典》第二百七十八条、第九百四十七条第一款的规定，经专有部分面积占比三分之二以上的业主且人数占比三分之二以上的业主参与表决，如果经参与专有部分面积过半数的业主且参与表决人数过半数的业主同意，则表明广大业主同意和原物业公司续签合同；反之，由业主委员会(物业管理委员会)牵头公开招标确定优质物业公司。</text>
      </view>
    </view>

    <!-- 立即投票按钮 -->
    <button class="vote-btn" @click="toVotePage">立即投票</button>

  </view>
</template>

<script>
export default {
  methods: {
    // 跳转到投票页面
    toVotePage() {
      uni.navigateTo({
        url: '/pages/vote' // 替换为实际投票页路径
      })
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.container {
  width: 100%;
  min-height: 100vh;
  /* 蓝色网格背景 */
 background-image: url('@/static/notice.jpg');
 background-repeat: no-repeat;
 background-size: 100% 100%;

  padding: 0 20rpx;
  box-sizing: border-box;
  position: relative;
}

/* 顶部标题 */
.header {
  padding: 120rpx 0 40rpx;
  text-align: center;
}
.main-title {
  font-size: 64rpx;
  color: #FFFFFF;
letter-spacing: 4px;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}
.subtitle-box {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  background-color: rgba(255,255,255,0.15);
  width: 400rpx;
  margin-left: auto;
  margin-right: auto;
  padding: 10rpx 0;
  border-radius: 30rpx;
  letter-spacing: 8px;
}
.subtitle {
  font-size: 28rpx;
  color: #FFFFFF;
}
.split {
  color: #FFFFFF;
  opacity: 0.7;
}

/* 须知卡片 */
.notice-card {
	    margin: 15px 40px 25px 40px;
 /* background-color: #FFFFFF;
  border-radius: 20rpx; */
  padding: 40rpx 5rpx;
 /* margin-bottom: 50rpx;
  box-shadow: 0 5rpx 15rpx rgba(0,0,0,0.1) */;
}
.notice-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}
.item-number {
  width: 30rpx;
  height: 30rpx;
  background-color: #1E88E5;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}
.item-text {
font-family:"黑体";
  font-size: 24rpx;
  color: #333333;
  line-height: 1.5;
}

/* 投票按钮 */
.vote-btn {
  width: 40%;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #2599ff;
  color: white;
  font-size: 30rpx;
  border-radius: 40rpx;
  margin: 0 auto 60rpx;
  display: block;
  border: none;
  box-shadow: 0 5rpx 15rpx rgba(30, 136, 229, 0.3);
}
.vote-btn::after {
  border: none;
}

/* 建筑装饰 */
.building-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 200rpx;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
}
.building {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  padding: 15rpx;
  border-radius: 5rpx 5rpx 0 0;
}
.building-1 {
  width: 120rpx;
  height: 180rpx;
  background-color: #FFCC80;
}
.building-2 {
  width: 80rpx;
  height: 140rpx;
  background-color: #BBDEFB;
  position: relative;
}
.building-3 {
  width: 100rpx;
  height: 160rpx;
  background-color: #B0BEC5;
}
.building-4 {
  width: 100rpx;
  height: 120rpx;
  background-color: #A5D6A7;
}
.window-row {
  display: flex;
  justify-content: space-around;
}
.window {
  width: 20rpx;
  height: 20rpx;
  background-color: #E3F2FD;
  border-radius: 3rpx;
}
.person {
  width: 15rpx;
  height: 15rpx;
  background-color: #4CAF50;
  border-radius: 50%;
  position: absolute;
  top: -20rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* 路面 */
.road {
  height: 100rpx;
  background-color: #B0BEC5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10rpx;
}
.road-line {
  width: 40rpx;
  height: 10rpx;
  background-color: white;
  border-radius: 5rpx;
}
.road-bottom {
  height: 30rpx;
  background-color: #EF5350;
}
</style>