first

components/JCell/JCell.vue

@@ -0,0 +1,57 @@
+<template>
+  <!-- 单元格布局 -->
+  <view
+    class="cell-main"
+    :hover-class="isTouch ? 'touch-hover' : ''"
+    :style="{ '--border-width': borderWidth, marginTop: mT + 'rpx', '--m-rl': mRL + 'rpx', backgroundColor: bgColor }"
+  >
+    <view class="title" :style="{ color: color }"> {{ title }} </view>
+    <slot name="right">
+      <image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
+    </slot>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: { type: String }, //标题
+  mT: { type: Number }, //上边距
+  mRL: { type: Number }, //左右两侧边距
+  bgColor: { type: String }, //背景颜色
+  color: { type: String }, //标题字体颜色
+  borderWidth: { type: String, default: '100vw' }, //边框距离左侧距离 默认100vw 没有边框
+  isTouch: { type: Boolean, default: true }, //是否有触摸反馈
+})
+</script>
+
+<style lang="scss" scoped>
+.cell-main {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: var(--m-rl);
+  margin-right: var(--m-rl);
+  height: 120rpx;
+  .title {
+    margin-left: 40rpx;
+    font-size: 32rpx;
+    font-weight: 400;
+  }
+  image {
+    width: 120rpx;
+    height: 120rpx;
+  }
+  background-color: #fff;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    width: calc(100vw - var(--border-width));
+    height: 1rpx;
+    background-color: #ededed;
+  }
+}
+</style>