uni_mattress/sleep/pages/shareUser/shareUser.vue

<template>
	<view class="flex-col justify-start page">
	  <cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>

	  <view class="flex-col justify-start section">
	    <view class="flex-col section_2 space-y-421">
	      <view class="flex-col">
	        <text class="self-start font_1 text_2">共享用户</text>
	        <view class="flex-col group_3 space-y-10">
	          <view class="flex-row justify-between items-center section_6">
	            <view class="flex-row">
	              <image
	                class="image_6"
	                src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/7F70B5FF967F44BC97BD7CD8786A70B4.png"
	              />
	              <view class="flex-col items-start group_4 space-y-10">
	                <text class="font_1 text_3">弘枫琬</text>
	                <text class="text_5">14872220394</text>
	                <text class="text_6 text_7">2020-09-19 03:22:34</text>
	              </view>
	            </view>
	            <view class="flex-col justify-start items-center text-wrapper"><text class="text_4">删除</text></view>
	          </view>
	          <view class="flex-row justify-center items-center section_7 space-x-10">
	            <image
	              class="image_7"
	              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874414496441492308.png"
	            />
	            <text class="text_8">添加用户</text>
	          </view>
	        </view>
	      </view>
	      <view class="flex-row justify-center items-center relative group_5">
	        <view class="flex-col justify-start items-center button"><text class="font_2">完成</text></view>
	        <text class="font_2 text_6 pos_2">跳过</text>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .section {
    background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/2E8800F59CE14717A09884B811B3C608.png");
    background-size: auto;
    background-repeat: no-repeat;
    .section_2 {
      padding-bottom: 1.25rem;
      background-image: linear-gradient(180deg, #1e1ef7e3 0%, #1dbff59c 100%);
      .section_3 {
        padding: 1.13rem 0.44rem 0.38rem;
        background-color: #ffffff4d;
        .group {
          padding: 0 0.5rem;
          .image {
            width: 1.06rem;
            height: 0.69rem;
          }
          .image_2 {
            width: 0.94rem;
            height: 0.69rem;
          }
          .image_3 {
            width: 1.5rem;
            height: 0.72rem;
          }
        }
        .space-x-6-reverse {
          & > view:not(:last-child),
          & > text:not(:last-child),
          & > image:not(:last-child) {
            margin-right: 0.38rem;
          }
        }
        .group_2 {
          padding: 0.63rem 0 0.38rem;
          .text {
            font-size: 1.16rem;
          }
          .section_4 {
            padding: 0.38rem 0.75rem;
            background-color: #ffffff99;
            border-radius: 1rem;
            border: solid 0.031rem #00000014;
            .image-wrapper {
              width: 1.19rem;
              .image_5 {
                width: 1.19rem;
                height: 0.44rem;
              }
              .image_4 {
                width: 1.13rem;
                height: 1.06rem;
              }
            }
            .section_5 {
              background-color: #00000033;
              width: 0.063rem;
              height: 1.16rem;
            }
          }
          .space-x-11 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-left: 0.69rem;
            }
          }
          .pos {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      .space-y-22 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 1.38rem;
        }
      }
      .font_1 {
        font-size: 1.13rem;
        font-family: PingFangSC;
        line-height: 1.06rem;
        color: #ffffff;
      }
      .text_2 {
        margin-left: 1.25rem;
        margin-top: 1.38rem;
      }
      .group_3 {
        margin-top: 0.88rem;
        padding: 0 1.25rem;
        .section_6 {
          padding: 0.94rem 0 0.94rem 0.94rem;
          background-color: #ffffff33;
          border-radius: 1rem;
          .image_6 {
            border-radius: 50%;
            width: 4rem;
            height: 4rem;
          }
          .group_4 {
            margin: 0.25rem 0 0.25rem 1.25rem;
            .text_3 {
              line-height: 1.03rem;
            }
            .text_5 {
              color: #ffffff;
              font-size: 0.88rem;
              font-family: PingFangSC;
              line-height: 0.63rem;
            }
            .text_7 {
              color: #ffffff;
              font-size: 0.63rem;
              font-family: PingFangSC;
              line-height: 0.47rem;
            }
          }
          .text-wrapper {
            padding: 0.25rem 0;
            background-image: linear-gradient(90deg, #2c3ff2 0%, #1e09de 100%);
            border-radius: 6.25rem 0px 0px 6.25rem;
            width: 2.75rem;
            height: 1.25rem;
            .text_4 {
              color: #ffffff;
              font-size: 0.75rem;
              font-family: PingFangSC;
              line-height: 0.69rem;
            }
          }
        }
        .section_7 {
          padding: 2.13rem 0;
          background-color: #ffffff33;
          border-radius: 1rem;
          .image_7 {
            width: 1.5rem;
            height: 1.5rem;
          }
          .text_8 {
            color: #ffffff;
            font-size: 1.5rem;
            font-family: PingFangSC;
            line-height: 1.41rem;
          }
        }
        .space-x-10 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 0.63rem;
          }
        }
      }
      .space-y-10 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.63rem;
        }
      }
      .group_5 {
        padding: 0 1.75rem;
        .button {
          padding: 0.5rem 0;
          background-image: linear-gradient(90deg, #5611f780 0%, #2c3ff7 100%);
          border-radius: 1rem;
          width: 8.69rem;
        }
        .font_2 {
          font-size: 1rem;
          font-family: PingFangSC;
          line-height: 0.94rem;
          color: #ffffff;
        }
        .pos_2 {
          position: absolute;
          right: 1.78rem;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .text_6 {
        opacity: 0.5;
      }
    }
    .space-y-421 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 26.31rem;
      }
    }
  }
}
</style>