jiliangxiaochengxu/pages/index.vue

<!-- @format -->

<template>
  <view class="content">
    <view class="titleBg">
      <image
        style="width: 100%; border-radius: 10px; height: 400rpx"
        src="../static/images/ad.png"
        mode=""
      >
      </image>
    </view>
    <view class="itemsContent">
      <view class="left">
        <view class="tz" @click="handleLedger">
          <view class="title"> 台账管理 </view>
          <view class="cicle"> </view>
        </view>
      </view>
      <view class="right">
        <view @click="handleAssay" class="ba">
          <text
            style="font-size: 36rpx; font-weight: bold; color: rgb(255, 127, 0)"
            >备案申请</text
          >
          <view class="cicleIcon"> </view>
        </view>
        <view @click="handleVer" class="jd">
          <text
            style="
              font-size: 36rpx;
              font-weight: bold;
              color: rgb(23, 219, 205);
            "
            >检定申报</text
          >
          <view class="cicleIcon"> </view>
        </view>
      </view>
    </view>
    <image
      class="aiImg"
      style="width: 130rpx; position: fixed; right: 20rpx; bottom: 10rpx"
      src="../static/images/ai.png"
      mode="aspectFit"
    >
    </image>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleAssay() {
      uni.navigateTo({
        url: "/pages/assay/index",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleLedger() {
      uni.navigateTo({
        url: "/pages/Ledger/list",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleVer() {
      uni.navigateTo({
        url: "/pages/verification/list",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
  onLoad: function () {},
};
</script>

<style lang="scss">
.aiImg {
  animation: shakeX 7s infinite ease-in-out;
}

@keyframes shakeX {
  from,
  to {
    transform: scale(1);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: scale(0.8);
  }

  20%,
  40%,
  60%,
  80% {
    transform: scale(0.9);
  }
}

.shakeX {
  animation-name: shakeX;
  animation-duration: 1s;
}

.cicle {
  margin-top: 6rpx;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  width: 40rpx;
  height: 40rpx;
  background: rgb(160, 173, 217);
  margin-left: 30rpx;
}

.itemsContent {
  width: 95%;
  margin: 0 auto;
  display: flex;

  .left {
    .tz {
      display: flex;
      border-raduis: 10px;
      width: 340rpx;
      height: 400rpx;
      background-image: url("../static/images/tzBg.png");
      background-size: 100% 100%;
      padding-top: 40rpx;
      padding-left: 40rpx;

      .title {
        font-size: 38rpx;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
          "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
          "Helvetica Neue", sans-serif;
        font-weight: bold;
      }
    }
  }

  .right {
    margin-left: 24rpx;

    & > * {
    }

    .ba {
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      .cicleIcon {
        width: 80rpx;
        height: 80rpx;
        margin-left: 40rpx;
        background-image: url("../static/images/cicle2.png");
        background-size: 100% 100%;
      }

      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      width: 340rpx;
      height: 190rpx;
      background: rgb(255, 232, 210);
    }

    .jd {
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      .cicleIcon {
        width: 80rpx;
        height: 80rpx;
        margin-left: 40rpx;
        background-image: url("../static/images/cicle1.png");
        background-size: 100% 100%;
      }

      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      margin-top: 20rpx;
      width: 340rpx;
      height: 190rpx;
      background: rgb(209, 248, 245);
    }
  }
}

.titleBg {
  width: 95%;
  margin: 20rpx auto 20rpx;
}

.content {
  padding: 20rpx 0;
  height: 100vh;
  background: rgb(248, 249, 250);
}

.items {
  box-shadow: rgba(238, 244, 250, 1) 0px 3px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  margin: 40rpx auto;
  width: 95%;
  padding: 70rpx 50rpx;
}

.items text {
  font-size: 36rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  font-weight: bold;
}
</style>