源文件

jeepay-ui-uapp-agent/components/newComponents/JLine/JLine.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="line" :class="{ 'border-none': props.isBorder }" :style="{ marginLeft: ml, padding: pd }">
+    <image :src="props.iconOn" class="icon" v-if="props.isSelect && iconOn != ''"></image>
+    <image :src="props.iconClose" class="icon" v-else-if="iconOn != ''"></image>
+    <view class="name single-text-beyond" :class="{ color: props.isSelect }">{{ props.name }}</view>
+    <view class="name right-text" :class="{ color: props.isSelect }">
+      {{ text }}
+      <image src="/static/equipmentImg/check.svg" class="select" v-if="props.isSelect"></image>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+
+const props = defineProps({
+  iconOn: { type: String, default: "" },
+  iconClose: { type: String, default: "" },
+  name: { type: String, default: "" },
+  isSelect: { type: Boolean, default: false },
+  isBorder: { type: Boolean, default: false },
+  text: { type: String },
+  ml: { type: String },
+  pd: { type: String },
+})
+</script>
+
+<style scoped lang="scss">
+.line {
+  border-top: 1rpx solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32rpx;
+  box-sizing: border-box;
+  .icon {
+    width: 36rpx;
+    height: 36rpx;
+    flex-shrink: 0;
+  }
+  .name {
+    max-width: 300rpx;
+    color: #333333;
+    font-size: 33rpx;
+    line-height: 46rpx;
+    flex-grow: 1;
+    margin: 0 20rpx;
+  }
+  .right-text {
+    text-align: right;
+  }
+  .select {
+    width: 36rpx;
+    height: 36rpx;
+    flex-shrink: 0;
+  }
+}
+
+.color {
+  color: $primaryColor !important;
+}
+
+.border-none {
+  border: none;
+}
+</style>