feat: 完成 随手拍 页面

pages/record/index.scss

+.wrapper {
+}
+
+.title {
+  font-size: 48rpx;
+  font-weight: bold;
+  text-align: center;
+  color: #000000;
+  padding: 60rpx 0;
+}
+
+.list {
+  padding: 0 60rpx;
+}
+
+.item {
+  height: 120rpx;
+  border-radius: 24rpx;
+  box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  padding-left: 84rpx;
+
+  &-icon {
+    $size: 72rpx;
+
+    width: $size;
+    height: $size;
+    margin-right: 60rpx;
+    display: block;
+  }
+
+  &-text {
+    font-size: 40rpx;
+    font-weight: bold;
+    text-align: center;
+    color: #ffffff;
+  }
+}
+
+.report-btn {
+  width: 222rpx;
+  height: 72rpx;
+  background: #ffffff;
+  border: 2rpx solid #8171fc;
+  border-radius: 54rpx;
+  margin: 0 auto;
+
+  position: fixed;
+  bottom: 128rpx;
+  left: calc(50% - 112rpx);
+  z-index: 9;
+
+  font-size: 28rpx;
+  text-align: center;
+  color: #8171fc;
+}

pages/record/index.vue

 <template>
-  <view> 随手拍 </view>
+  <view>
+    <view class="wrapper">
+      <view class="title">选择发布类型</view>
+
+      <view class="list">
+        <view v-for="(item, index) in list" :key="item.id" class="item" :style="{ marginTop: index === 0 ? 0 : '60rpx', background: item.background }">
+          <image class="item-icon" :src="item.icon" />
+          <view class="item-text">{{ item.name }}</view>
+        </view>
+      </view>
+
+      <view class="footer">
+        <u-button class="report-btn" @click="onReportClick">举报说明</u-button>
+      </view>
+
+      <u-modal :show="showReport" title="举报说明" :content="content" @confirm="onReportConfirm" />
+    </view>
+  </view>
 </template>
 
 <script>
+const list = [
+  {
+    id: uni.$u.guid(),
+    name: '交通违法举报',
+    icon: '/static/icon/ic-wf@2x.png',
+    background: 'linear-gradient(156deg, #ffaeae 0%, #fe4d4d 100%)',
+  },
+  {
+    id: uni.$u.guid(),
+    name: '城市不文明行为举报',
+    icon: '/static/icon/ic-bwm@2x.png',
+    background: 'linear-gradient(156deg,#8bbcff 0%, #0d71ff 100%)',
+  },
+  {
+    id: uni.$u.guid(),
+    name: '交通设施故障上报',
+    icon: '/static/icon/ic-gz@2x.png',
+    background: 'linear-gradient(156deg,#ffdc8b 0%, #ffb00d 100%)',
+  },
+];
+
 export default {
   data() {
-    return {};
+    return {
+      list,
+      showReport: false,
+      content:
+        '\n1.本平台仅接收荣县行政区域内的交通违法网上举报，且违法行为发生后30日内举报有效。 \n2.举报人不得在驾驶过程中或其他有碍交通安全的情况下进行举报。 \n3.举报人提供的照片和视频应当客观真实，并通过合法途径、合法方式取得。举报人应当如实描述违法行为发生时间、地点，违法机动车号牌、外观和具体违法行为，并能够与举报视频相互印证。缺乏上述要素的，公安交警部门依法不予以受理 \n4.对多次举报失实，恶意举报的举报人，经查证属实的，公安机关交通管理部门不再受理其举报。故意捏造违法事实陷害他人、以举报为手段敲诈勒索的，将按相关规定纳入公民社会征信体系。涉嫌违法犯罪的，依法追究法律责任。 \n5.不属于本平台接受范围的交通违法举报以及对交通执法管理的意见建议，可以联系属地公安交警部。 \n6.举报人在拍摄交通违法视频前，应当仔细阅读各类违法举报的拍摄要点及要求，拍摄的视频文件大小不超过50M。 \n7.如使用行车记录仪视频进行举报，切勿进行压缩、转码等操作，应剪辑行车记录仪设备存储卡内原始视频后上传，以确保上传视频清晰。',
+    };
+  },
+  methods: {
+    async onReportClick() {
+      console.log('onReportClick');
+      this.showReport = true;
+    },
+
+    async onReportConfirm() {
+      this.showReport = false;
+    },
   },
-  methods: {},
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+@import 'index.scss';
+</style>