AstraZeneca_uniapp/pages/index/index.vue

<template>
  <view class="indexpage" style="width: 100%">
    <div class="indextop">
      <image src="../../static/index/banner.png" class="banner"></image>
      <div class="bz">
        <div>
          <img
            src="https://www.idea-co-sf.com/dockPic/1.png"
            class="yyicon"
            alt=""
          />
          <div>预约</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://www.idea-co-sf.com/dockPic/2.png"
            class="yyicon"
            alt=""
          />
          <div>签到</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://www.idea-co-sf.com/dockPic/3.png"
            class="yyicon"
            alt=""
          />
          <div>装卸</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://www.idea-co-sf.com/dockPic/4.png"
            class="yyicon"
            alt=""
          />
          <div>签收</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://www.idea-co-sf.com/dockPic/5.png"
            class="yyicon"
            alt=""
          />
          <div>离场</div>
        </div>
      </div>
    </div>
    <div class="report">
      <div class="left">
        <img src="https://www.idea-co-sf.com/dockPic/6.png" alt="" />
        <div class="line"></div>
      </div>
      <div class="right">
        <div>
          <div class="info">
            <div>受暴雨天气影响，2024-07-13 8：00...</div>
            <div class="day">1天前</div>
          </div>
          <div class="info">
            <div>受暴雨天气影响，2024-07-13 8：00...</div>
            <div class="day">1天前</div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu-list">
      <div class="menu-row">
        <div class="text">送货预约</div>
        <img
          src="https://www.idea-co-sf.com/dockPic/7.png"
          class="back"
          alt=""
        />
        <img
          src="https://www.idea-co-sf.com/dockPic/7-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div class="menu-row">
        <div class="text">取货预约</div>
        <img
          src="https://www.idea-co-sf.com/dockPic/8.png"
          class="back"
          alt=""
        />
        <img
          src="https://www.idea-co-sf.com/dockPic/8-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div class="menu-row">
        <div class="text">预约历史</div>
        <img
          src="https://www.idea-co-sf.com/dockPic/9.png"
          class="back"
          alt=""
        />
        <img
          src="https://www.idea-co-sf.com/dockPic/9-1.png"
          class="icon"
          alt=""
        />
      </div>
    </div>
    <div class="menu-list">
      <div class="menu-row">
        <div
          class="text"
          @click="jumpPage('/pages/subPackages/choosecar/index')"
        >
          装货预约
        </div>
        <img
          src="https://www.idea-co-sf.com/dockPic/7.png"
          class="back"
          alt=""
        />
        <img
          src="https://www.idea-co-sf.com/dockPic/7-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div class="menu-row">
        <div class="text">卸货预约</div>
        <img
          src="https://www.idea-co-sf.com/dockPic/8.png"
          class="back"
          alt=""
        />
        <img
          src="https://www.idea-co-sf.com/dockPic/8-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/yy_history/index')"
      >
        <div class="text">预约历史</div>
        <img
          src="https://www.idea-co-sf.com/dockPic/9.png"
          class="back"
          alt=""
        />
        <img
          src="https://www.idea-co-sf.com/dockPic/9-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/carmange/index')"
      >
        <div class="text">车辆管理</div>
        <img
          src="https://www.idea-co-sf.com/dockPic/10.png"
          class="back"
          alt=""
        />
        <img
          src="https://www.idea-co-sf.com/dockPic/10-1.png"
          class="icon"
          alt=""
        />
      </div>
    </div>
  </view>
</template>
<script>
// import {demo} from "@/js_sdk/http"
import {
  getUserPower,
  getUserLocalStorageInfo,
  getVenueAppointListAppCount,
  getMeetingAppointListAppCount,
} from "@/js_sdk/http";
export default {
  data() {
    return {
      mapList: [],
      MeetingNum: 0,
      VenueNum: 0,
    };
  },
  onShareAppMessage() {},
  mounted() {
    // demo();
  },
  onLoad() {},
  onShow() {},
  methods: {
    jumpPage(path) {
      console.log(path);
      uni.navigateTo({
        url: path,
        fail: (fail) => {},
      });
    },
  },
};
</script>

<style lang="scss">
.indexpage {
  .menu-list {
    margin-top: 24rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #ffffff;
    width: 100%;
    padding: 30rpx 32rpx 6rpx 32rpx;
    box-sizing: border-box;
    .menu-row {
      width: 330rpx;
      height: 128rpx;
      position: relative;
      margin-bottom: 24rpx;
      .text {
        position: absolute;
        left: 32rpx;
        top: 38rpx;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        z-index: 2;
      }
      .back {
        width: 330rpx;
        height: 128rpx;
        position: absolute;
        z-index: 1;
      }
      .icon {
        position: absolute;
        left: 230rpx;
        top: 32rpx;
        width: 68rpx;
        height: 68rpx;
        z-index: 2;
      }
    }
  }
  .report {
    margin-top: 24rpx;
    display: flex;
    padding: 24rpx 28rpx;
    background: #ffffff;
    .right {
      display: flex;
      align-items: center;
      margin-left: 16rpx;
    }
    .info {
      display: flex;
      align-items: center;
      margin-top: 12rpx;
      margin-bottom: 12rpx;
      display: flex;
      color: rgba(24, 23, 42, 1);
    }
    .left {
      display: flex;
      align-items: center;
    }
    .line {
      width: 2rpx;
      height: 80rpx;
      background: #e7eaf0;
    }
    image {
      height: 96rpx;
      width: 86rpx;
      margin-right: 16rpx;
    }
    .day {
      font-size: 24rpx;
      color: rgba(102, 102, 102, 1);
    }
  }
  .indextop {
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding-bottom: 24rpx;
  }
  .bz {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    .yyicon {
      height: 60rpx;
      width: 60rpx;
    }
    .jiantou {
      color: rgb(122, 134, 154);
      margin-left: 12rpx;
      margin-right: 12rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
  }
  .jiaobiao {
    position: absolute;
    top: 10rpx;
    right: 30rpx;
    border-radius: 50%;
    background: red;
    font-size: 24rpx;
    height: 30rpx;
    width: 30rpx;
    text-align: center;
    line-height: 24rpx;
    color: white;
    line-height: 30rpx;
  }
  .banner {
    width: 686rpx;
    height: 300rpx;
    display: block;
    margin: auto;
    z-index: 1;
  }
}
page {
  background: rgba(245, 247, 250, 1);
}
</style>