提交

MrShi

2025-04-23 c8b32b8bca79a116cfab70eb8c389907b664c9ca

 h5/pages/chart/chart.vue

@@ -1,6 +1,43 @@
<template>
   <view>
		
   <view class="box" :style="{ backgroundImage: 'url(' + backgroundImg + ')' }">
      <view class="box_list">
         <view class="box_list_item" @click="jump(0)">
            <view class="left">
               <image src="/static/icon_tag_chart.png" mode="widthFix"></image>
               <view class="left_info">
                  <text>SHE事件上报</text>
                  <text>TAG</text>
               </view>
            </view>
            <view class="right">
               <image src="/static/icon_ahead.png" mode="widthFix"></image>
            </view>
         </view>
         <view class="box_list_item" @click="jump(3)">
            <view class="left">
               <image src="/static/icon_smat_chart.png" mode="widthFix"></image>
               <view class="left_info">
                  <text>跌绊滑风险上报</text>
                  <text>SMAT</text>
               </view>
            </view>
            <view class="right">
               <image src="/static/icon_ahead.png" mode="widthFix"></image>
            </view>
         </view>
         <view class="box_list_item" @click="jump(2)">
            <view class="left">
               <image src="/static/icon_dca_chart.png" mode="widthFix"></image>
               <view class="left_info">
                  <text>深度符合性审查DCA图表</text>
                  <text>DCA</text>
               </view>
            </view>
            <view class="right">
               <image src="/static/icon_ahead.png" mode="widthFix"></image>
            </view>
         </view>
      </view>
   </view>
</template>

@@ -8,12 +45,89 @@
   export default {
      data() {
         return {
				
            backgroundImg: require('@/static/home_bg.png')
         };
      },
      methods: {
         jump(type) {
            uni.navigateTo({
               url: `/pages/chart_details/chart_details?type=${type}`
            })
         }
      }
   }
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>

<style lang="scss" scoped>
   .box {
      width: 100%;
      height: auto;
      padding-top: 180rpx;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-size: 100% 350rpx;
      .box_list {
         width: 100%;
         padding: 0 30rpx;
         box-sizing: border-box;
         .box_list_item {
            width: 100%;
            padding: 20rpx;
            box-sizing: border-box;
            border-radius: 30rpx;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30rpx;
            &:last-child {
               margin: 0;
            }
            .left {
               flex: 1;
               height: 100%;
               display: flex;
               align-items: center;
               image {
                  flex-shrink: 0;
                  width: 150rpx;
                  height: 150rpx;
               }
               .left_info {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  text {
                     &:nth-child(1) {
                        color: rgba(16,16,16,1);
                        font-size: 36rpx;
                     }
                     &:nth-child(2) {
                        color: rgba(16,16,16,1);
                        font-size: 28rpx;
                        margin-top: 20rpx;
                     }
                  }
               }
            }
            .right {
               width: 50rpx;
               height: 50rpx;
               flex-shrink: 0;
               margin-left: 30rpx;
               image {
                  width: 100%;
                  height: 100%;
               }
            }
         }
      }
   }
</style>