com.kasite.client.uniapp.patient/pagesPatient/st1/business/outpatient/outpatientRefundNew/components/cardDiv/cardDiv.vue

<template>
  <view class="card-div">
    <view class="card-div__gapL" :style="{ backgroundColor: colorGap }"></view>
    <view class="card-div__line" :style="{ backgroundColor: colorLine }"></view>
    <view class="card-div__gapR" :style="{ backgroundColor: colorGap }"></view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  colorLine: {
    type: String,
    default: "#eee",
  },
  colorGap: {
    type: String,
    default: "#f0f1f6",
  }
});
</script>

<style>
/* 卡片分割线样式 */
.card-div {
  --circle-size: 26upx;
  position: relative;
  width: 100%;
  height: 80upx;
  margin: 20upx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-div__line {
  height: 1upx;
  width: 92%;
  border-bottom: 1upx dashed #eee;
}

.card-div__gapL {
  content: '';
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background-color: #f0f1f6;
  position: absolute;
  top: 50%;
  left: calc(var(--circle-size) / -2);
  transform: translate(0, -50%);
}

.card-div__gapR {
  content: '';
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background-color: #f0f1f6;
  position: absolute;
  top: 50%;
  right: calc(var(--circle-size) / -2);
  transform: translate(0%, -50%);
}
</style>