jiangchengfeiyi-xiaochengxu/pages/booking/ContactInformation.vue

<template>
<view class="flex-col page">
  <view class="flex-col flex-1 group_2">
    <view class="flex-col">
      <view class="flex-row justify-between items-center section">
        <view class="flex-row items-center">
          <image
            class="shrink-0 image_3"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=3a9304082db1a0ce59900947da89bfaf.png"
          />
          <text class="font ml-9">张三</text>
          <text class="font_2 ml-9">15888610253</text>
        </view>
        <view class="flex-row group_3">
          <image
            class="image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=4ea2c3040a66adfdc3cd18d7fe9fea60.png"
          />
          <image
            class="ml-12 image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=6184b59dfc6e09773e972bd085509877.png"
          />
        </view>
      </view>
      <view class="flex-row justify-between items-center section">
        <view class="flex-row items-center">
          <image
            class="shrink-0 image_3"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=3a9304082db1a0ce59900947da89bfaf.png"
          />
          <text class="font ml-9">张三</text>
          <text class="font_2 ml-9">15888610253</text>
        </view>
        <view class="flex-row group_3">
          <image
            class="image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=4ea2c3040a66adfdc3cd18d7fe9fea60.png"
          />
          <image
            class="ml-12 image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=6184b59dfc6e09773e972bd085509877.png"
          />
        </view>
      </view>
      <view class="flex-row justify-between items-center section">
        <view class="flex-row items-center">
          <image
            class="shrink-0 image_3"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=3a9304082db1a0ce59900947da89bfaf.png"
          />
          <text class="font ml-9">张三</text>
          <text class="font_2 ml-9">15888610253</text>
        </view>
        <view class="flex-row group_3">
          <image
            class="image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=4ea2c3040a66adfdc3cd18d7fe9fea60.png"
          />
          <image
            class="ml-12 image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=6184b59dfc6e09773e972bd085509877.png"
          />
        </view>
      </view>
      <view class="flex-row justify-between items-center section">
        <view class="flex-row items-center">
          <image
            class="shrink-0 image_3"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=3a9304082db1a0ce59900947da89bfaf.png"
          />
          <text class="font ml-9">张三</text>
          <text class="font_2 ml-9">15888610253</text>
        </view>
        <view class="flex-row group_3">
          <image
            class="image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=4ea2c3040a66adfdc3cd18d7fe9fea60.png"
          />
          <image
            class="ml-12 image_2"
            src="https://ide.code.fun/api/image?token=6710a29d1511d900114ac910&name=6184b59dfc6e09773e972bd085509877.png"
          />
        </view>
      </view>
    </view>
    <view class="flex-col justify-start items-center section_2 mt-251">
      <view class="flex-col justify-start items-center button"><text class="font text_2">添加新联系人</text></view>
    </view>
  </view>
</view>
</template>

<script>
import {ref} from 'vue';

const items = ([null,null,null,null])
</script>

<style lang="scss" scoped>
.ml-9 {
  margin-left: 16.88rpx;
}
.mt-251 {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.page {
  background-color: #f5f5dc;
  border-radius: 28.13rpx 28.13rpx 0rpx 0rpx;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group_2 {
  overflow-y: auto;
}
.section {
  padding: 52.5rpx 15rpx;
  background-color: #fffef8;
  border-bottom: solid 1.88rpx #c8c8c8;
}
.image_3 {
  width: 33.75rpx;
  height: 33.75rpx;
}
.font {
  font-size: 30rpx;
  font-family: Open Sans;
  line-height: 27.19rpx;
  color: #323232;
}
.font_2 {
  font-size: 30rpx;
  font-family: Open Sans;
  line-height: 22.05rpx;
  color: #323232;
}
.group_3 {
  margin-right: 11.25rpx;
}
.image_2 {
  width: 39.38rpx;
  height: 39.38rpx;
}
.section_2 {
  padding: 22.5rpx 0 15rpx;
  background-color: #fffef8;
}
.button {
  padding: 30rpx 0;
  background-color: #fbb612;
  border-radius: 75rpx;
  width: 639.38rpx;
}
.text_2 {
  color: #ffffff;
  line-height: 27.75rpx;
}
@import url(../../common/css/global.css);
</style>