参加产品需求会议 配置uinapp开发环境 熟悉文件目录 完成提诉求前端页面

pages.json

@@ -24,7 +24,8 @@
 		{
 			"path": "pages/appeal/index",
 			"style": {
-				"navigationBarTitleText": "提建议"
+				"navigationBarTitleText": "提建议",				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTextStyle":"white"
 			}
 		},
 		{

pages/appeal/appealCard.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="otherAppeal">
+    <div class="title">
+      {{ otherAppeal.title }}
+    </div>
+    <div class="details">
+      <img :src="otherAppeal.image" class="icon" />
+      <span class="name">{{ otherAppeal.name }}</span
+      >：
+      <span class="msg">{{ otherAppeal.msg }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    props:['otherAppeal']
+}
+</script>
+<style lang="scss" scoped>
+.otherAppeal {
+  margin: 5% 9%;
+  .title {
+    margin-bottom: 5%;
+    font-size: 35rpx;
+  }
+  .details {
+    .name {
+      font-size: 30rpx;
+      color: red;
+    }
+    .msg {
+      font-size: 30rpx;
+    }
+    .icon {
+      width: 60rpx;
+      height: 60rpx;
+      position: absolute;
+      left: 1%;
+    }
+  }
+}
+</style>

pages/appeal/index.vue

@@ -1,49 +1,122 @@
 <template>
-	<view class="content">
-		{{message}}
-	</view>
+  <view class="content">
+    <div class="banner">
+      <img :src="bannerSrc" alt="banner" />
+    </div>
+    <div class="menus flex">
+      <div class="menu">
+        <p class="logo">
+          <img src="/static/appeal/myappeal.png" />
+        </p>
+        <div class="desc">我的诉求</div>
+      </div>
+      <div class="menu">
+        <p class="logo">
+          <img src="/static/appeal/putappeal.png" />
+        </p>
+        <div class="desc">提出诉求</div>
+      </div>
+    </div>
+    <div class="otherAppealList">
+      <div v-for="(otherAppeal,index) in otherAppealList" :key="index"> 
+        <appealCard :otherAppeal="otherAppeal"></appealCard>
+      </div>
+    </div>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				message:'提诉求'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-			
-       }
-	}
+import appealCard from './appealCard.vue'
+export default {
+  components:{
+    appealCard
+  },
+  data() {
+    return {
+      bannerSrc: "/static/appeal/banner.png",
+      otherAppealList: [
+        {
+          title: "航投大厦餐厅服务建议",
+          name: "市场服务与监督管理局",
+          msg: "尊敬的市民您好！空港市场监管分局已与餐厅负责人取得了电话联系，根据您所提出的建议，餐厅将有针对性的进行整改，加强……",
+          image: "/static/appeal/avator.png",
+        },
+        {
+          title: "拉土车夜间噪音问题整改诉求",
+          name: "市场服务与监督管理局",
+          msg: "尊敬的市民您好！收到您的留言，我们十分重视！正平大街开展拉土作业的车辆为西安（咸阳）机场三期扩建工程建设项目运输……",
+          image: "/static/appeal/avator.png",
+        },
+      ],
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+.content {
+  width: 100%;
+  height: 100vh;
+  .banner {
+    height: 25%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .menus {
+    width: 80%;
+    height: 15%;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 25rpx;
+    transform: translateY(-60%);
+    box-shadow: 0rpx 10rpx 5rpx rgb(212, 212, 212);
+    .menu {
+      .desc {
+        font-weight: bolder;
+        text-align: center;
+      }
+      .logo {
+        text-align: center;
+        img {
+          width: 100rpx;
+          height: 100rpx;
+        }
+      }
+    }
+  }
+  .otherAppealList {
+	  transform: translateY(-15%);
+    .otherAppeal {
+      margin: 5% 9%;
+      .title {
+        margin-bottom: 5%;
+        font-size: 35rpx;
+      }
+      .details {
+        .name {
+          font-size: 30rpx;
+          color: red;
+        }
+        .msg {
+          font-size: 30rpx;
+        }
+        .icon {
+          width: 60rpx;
+          height: 60rpx;
+          position: absolute;
+          left: 1%;
+        }
+      }
+    }
+  }
+}
 </style>