源文件

jeepay-ui-uapp-agent/pages/statistics/components/AgentCard.vue

@@ -0,0 +1,76 @@
+<template>
+  <view class="agent-wrapper" :style="{ padding: pd }">
+    <view class="agent-left">
+      <image :src="userImg" mode="scaleToFill" />
+      <view class="agent-info single-text-beyond" :style="{ color: nameColor, fontWeight: nameWeight }">
+        {{ name }}
+        <view :style="{ color: textColor }">{{ agentNo }}</view>
+      </view>
+    </view>
+    <image :src="arrowImg" mode="scaleToFill" />
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  userImg: {
+    type: String,
+    default: "/static/iconImg/user-white.svg",
+  },
+  arrowImg: {
+    type: String,
+    default: "/static/iconImg/right-arrow.svg",
+  },
+  name: {
+    type: String,
+  },
+  agentNo: {
+    type: String,
+  },
+  pd: {
+    type: String,
+  },
+  textColor: {
+    type: String,
+  },
+  nameColor: {
+    type: String,
+  },
+  nameWeight: {
+    type: String,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.agent-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  .agent-left {
+    display: flex;
+    align-items: center;
+    image {
+      width: 82rpx;
+      height: 82rpx;
+      margin-right: 20rpx;
+    }
+    .agent-info {
+      width: 400rpx;
+      font-size: 28rpx;
+      color: #fff;
+      view {
+        margin-top: 10rpx;
+        font-size: 23rpx;
+        color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  }
+  image {
+    width: 40rpx;
+    height: 40rpx;
+  }
+}
+</style>