first

components/JDetailsCell/JDetailsCell.vue

@@ -0,0 +1,65 @@
+<template>
+  <template v-if="subTitle">
+    <view class="details-wrapper" style="align-items: flex-start; padding-top: 40rpx">
+      <view class="details-title">{{ title }}</view>
+      <view>
+        <view class="sub-title">
+          <view class="details-info single-text-beyond"> {{ subTitle }}</view>
+          <image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
+        </view>
+        <view class="sub-info details-info single-text-beyond">{{ info }}</view>
+      </view>
+    </view>
+  </template>
+  <template v-else>
+    <view class="details-wrapper">
+      <view class="details-title">{{ title }}</view>
+      <view class="details-info single-text-beyond">{{ info }}</view>
+      <image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
+    </view>
+  </template>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String }, //标题
+  info: [String, Number], //内容
+  subTitle: { type: String }, //副标题
+})
+</script>
+
+<style lang="scss" scoped>
+.details-wrapper {
+  display: flex;
+  align-items: center;
+  padding-left: 40rpx;
+  min-height: 120rpx;
+  font-size: 30rpx;
+  background-color: #fff;
+  .details-title {
+    width: 200rpx;
+    color: #4c4c4c;
+  }
+  .details-info {
+    flex: 1;
+    width: 334rpx;
+  }
+  image {
+    width: 108rpx;
+    height: 120rpx;
+  }
+}
+.sub-title {
+  display: flex;
+  image {
+    width: 108rpx;
+    height: 40rpx;
+  }
+}
+.sub-info {
+  margin-top: 20rpx;
+  font-size: 30rpx;
+  color: #a1a1a1;
+  padding-bottom: 40rpx;
+}
+</style>