uni/packages/card/index.vue

<!--
 * @Author: peerless_hero peerless_hero@outlook.com
 * @Date: 2023-07-08 01:36:19
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-07-10 18:43:32
 * @FilePath: \uni\packages\card\index.vue
 * @Description:
 *
-->
<template>
  <View class="th-card" bg-white rounded-16rpx m-24rpx max-w-702rpx overflow-hidden>
    <slot />
    <View v-if="noCardActions" h-16rpx />
  </View>
</template>

<script lang="ts" setup name="Card">
/** 不存在操作栏组件时，自动增加底部的内边距 */
const noCardActions = useSlots().default().every(({ type }) =>
  typeof type !== 'object' || !('name' in type) || type.name !== 'CardActions',
)
</script>

<style lang="scss">
.th-card {
  box-shadow: 0px 1px 6px 0px rgba(216,216,216,0.5);
}

.group_1 {
  --at-apply: p-24rpx box-shadow: 0px 1px 6px 0px #d8d8d880;
  background-color: #ffffff;
  border-radius: 8px;
  position: relative;
  align-self: center;
}

.text_5 {
  --at-apply: leh-42 m-24rpx fs-30 overflow-wrap: break-word;
  color: #3a3a3a;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.block_6 {
  --at-apply: m-16rpx
}

.text-wrapper_2 {
  --at-apply: p-6rpx background-color: rgba(242, 247, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(188, 221, 255, 1);
  padding: 6rpx 18rpx 4rpx 18rpx;
}

.text_6 {
  overflow-wrap: break-word;
  color: rgba(41, 121, 255, 1);
  font-size: 24rpx;

  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.text-wrapper_3 {
  border-radius: 4px;
  border: 1px solid rgba(251, 199, 199, 1);
  padding: 6rpx 18rpx 4rpx 18rpx;
}

.text_7 {
  overflow-wrap: break-word;
  color: rgba(228, 61, 51, 1);
  font-size: 24rpx;

  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.text_8 {
  --at-apply: m-16rpx fs-24 leh-36 width: 654rpx;
  height: 108rpx;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 24rpx;
  text-align: left;
  line-height: 36rpx;
  margin: 16rpx 0 0 24rpx;
}

.text-wrapper_19 {
  --at-apply: m-16rpx width: 504rpx;
  margin: 16rpx 150rpx 0 24rpx;
}

.text_9 {
  --at-apply: fs-24 leh-34 overflow-wrap: break-word;
  color: rgba(144, 147, 153, 1);
  font-size: 24rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.text_10 {
  --at-apply: fs-24 leh-36 height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 24rpx;

  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
}

.text-wrapper_20 {
  --at-apply: m-16rpx width: 244rpx;
  margin: 16rpx 410rpx 0 24rpx;
}

.text_11 {
  --at-apply: fs-24 leh-36 overflow-wrap: break-word;
  color: rgba(144, 147, 153, 1);
  font-size: 24rpx;

  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.text_12 {
  --at-apply: fs-24 leh-36 height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 24rpx;

  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
}

.text-wrapper_21 {
  --at-apply: m-16rpx
}

.text_13 {
  --at-apply: fs-24 leh-34 overflow-wrap: break-word;
  color: rgba(144, 147, 153, 1);
  font-size: 24rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.text_14 {
  --at-apply: fs-24 leh-34 height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 24rpx;

  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
}

.block_7 {
  width: 602rpx;
  margin: 24rpx 76rpx 0 0;
}

.group_2 {
  background-color: rgba(242, 247, 255, 1);
  border-radius: 0px 0px 0px 8px;
  position: relative;
  padding: 36rpx 124rpx 34rpx 124rpx;
}

.image-text_9 {
  width: 102rpx;
}

.thumbnail_11 {
  width: 34rpx;
  height: 34rpx;
  margin-bottom: 2rpx;
}

.text-group_1 {
  --at-apply: fs-26 leh-34 overflow-wrap: break-word;
  color: rgba(41, 121, 255, 1);
  font-size: 26rpx;

  text-align: right;
  white-space: nowrap;
  line-height: 36rpx;
}

.image_1 {
  position: absolute;
  left: 24rpx;
  top: 0;
  width: 654rpx;
  height: 2rpx;
}

.image-text_10 {
  width: 152rpx;
  margin: 36rpx 0 34rpx 0;
}

.thumbnail_12 {
  width: 32rpx;
  height: 32rpx;
  margin: 2rpx 0 2rpx 0;
}

.text-group_2 {
  --at-apply: fs-24 leh-36 overflow-wrap: break-word;
  color: rgba(41, 121, 255, 1);
  font-size: 26rpx;

  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
}
</style>

<!-- <style lang="scss">
// html {
//   font-size: 37.5px;
// }

.group_1 {
  box-shadow: 0px 1px 6px 0px rgba(216, 216, 216, 0.5);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  position: relative;
  height: 7.12rem;
  align-self: center;
  padding-right: 0.32rem;
}

.text_5 {
  overflow-wrap: break-word;
  color: rgba(58, 58, 58, 1);
  font-size: 0.4rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 0.56rem;
 // margin: 0.32rem 3.12rem 0 0.32rem;
}

.block_6 {
  width: 2.88rem;
  margin: 0.214rem 5.84rem 0 0.32rem;
}

.text-wrapper_2 {
  background-color: rgba(242, 247, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(188, 221, 255, 1);
  padding: 0.08rem 0.24rem 0.054rem 0.24rem;
}

.text_6 {
  overflow-wrap: break-word;
  color: rgba(41, 121, 255, 1);
  font-size: 0.32rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 0.454rem;
}

.text-wrapper_3 {
  border-radius: 4px;
  border: 1px solid rgba(251, 199, 199, 1);
  padding: 0.08rem 0.24rem 0.054rem 0.24rem;
}

.text_7 {
  overflow-wrap: break-word;
  color: rgba(228, 61, 51, 1);
  font-size: 0.32rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 0.454rem;
}

.text_8 {
  width: 8.72rem;
  height: 1.44rem;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 0.32rem;
  text-align: left;
  line-height: 0.48rem;
  margin: 0.214rem 0 0 0.32rem;
}

.text-wrapper_19 {
  width: 6.72rem;
  margin: 0.214rem 2rem 0 0.32rem;
}

.text_9 {
  overflow-wrap: break-word;
  color: rgba(144, 147, 153, 1);
  font-size: 0.32rem;

  text-align: left;
  white-space: nowrap;
  line-height: 0.454rem;
}

.text_10 {
  height: 0.454rem;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 0.32rem;

  text-align: left;
  white-space: nowrap;
  line-height: 0.48rem;
}

.text-wrapper_20 {
  width: 3.254rem;
  margin: 0.214rem 5.467rem 0 0.32rem;
}

.text_11 {
  overflow-wrap: break-word;
  color: rgba(144, 147, 153, 1);
  font-size: 0.32rem;

  text-align: left;
  white-space: nowrap;
  line-height: 0.454rem;
}

.text_12 {
  height: 0.454rem;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 0.32rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.48rem;
}

.text-wrapper_21 {
  width: 5.44rem;
  margin: 0.214rem 3.28rem 0 0.32rem;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(144, 147, 153, 1);
  font-size: 0.32rem;

  text-align: left;
  white-space: nowrap;
  line-height: 0.454rem;
}

.text_14 {
  height: 0.454rem;
  overflow-wrap: break-word;
  color: rgba(106, 106, 106, 1);
  font-size: 0.32rem;

  text-align: left;
  white-space: nowrap;
  line-height: 0.48rem;
}

.block_7 {
  width: 8.027rem;
  margin: 0.32rem 1.014rem 0 0;
}

.group_2 {
  background-color: rgba(242, 247, 255, 1);
  border-radius: 0px 0px 0px 8px;
  position: relative;
  padding: 0.48rem 1.654rem 0.454rem 1.654rem;
}

.image-text_9 {
  width: 1.36rem;
}

.thumbnail_11 {
  width: 0.454rem;
  height: 0.454rem;
  margin-bottom: 0.027rem;
}

.text-group_1 {
  overflow-wrap: break-word;
  color: rgba(41, 121, 255, 1);
  font-size: 0.346rem;

  text-align: right;
  white-space: nowrap;
  line-height: 0.48rem;
}

.image_1 {
  position: absolute;
  left: 0.32rem;
  top: 0;
  width: 8.72rem;
  height: 0.027rem;
}

.image-text_10 {
  width: 2.027rem;
  margin: 0.48rem 0 0.454rem 0;
}

.thumbnail_12 {
  width: 0.427rem;
  height: 0.427rem;
  margin: 0.027rem 0 0.027rem 0;
}

.text-group_2 {
  overflow-wrap: break-word;
  color: rgba(41, 121, 255, 1);
  font-size: 0.346rem;

  text-align: left;
  white-space: nowrap;
  line-height: 0.48rem;
}
</style> -->