<script setup lang="ts">
import { ref } from 'vue'
//
const des = ref('收藏')
</script>

<template>
  <!-- <view class="category">category</view> -->
  <LaiTingTop v-model:des="des" />
  <view class="collect_bg">
    <view class="collect_list">
      <view class="collect_list_img">
        <image
          class="collect_list_img_self"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="collect_list_middle">
        <view class="collect_list_title">睡眠音乐</view>
        <view class="collect_list_time">2022-04-21 11:23:23</view>
        <view>
          <image class="middle_sq_start" src="../../static/images/start.png" />
        </view>
      </view>
      <view class="collect_list_button">
        <view>
          <image class="middle_sq_start" src="../../static/images/edit.png" />
        </view>
        <view class="collect_view">查看</view>
      </view>
    </view>
    <view class="collect_list">
      <view class="collect_list_img">
        <image
          class="collect_list_img_self"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="collect_list_middle">
        <view class="collect_list_title">睡眠音乐</view>
        <view class="collect_list_time">2022-04-21 11:23:23</view>
        <view>
          <image class="middle_sq_start" src="../../static/images/start.png" />
        </view>
      </view>
      <view class="collect_list_button">
        <view>
          <image class="middle_sq_start" src="../../static/images/edit.png" />
        </view>
        <view class="collect_view">查看</view>
      </view>
    </view>
    <view class="collect_list">
      <view class="collect_list_img">
        <image
          class="collect_list_img_self"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="collect_list_middle">
        <view class="collect_list_title">睡眠音乐</view>
        <view class="collect_list_time">2022-04-21 11:23:23</view>
        <view>
          <image class="middle_sq_start" src="../../static/images/start.png" />
        </view>
      </view>
      <view class="collect_list_button">
        <view>
          <image class="middle_sq_start" src="../../static/images/edit.png" />
        </view>
        <view class="collect_view">查看</view>
      </view>
    </view>
    <view class="collect_list">
      <view class="collect_list_img">
        <image
          class="collect_list_img_self"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="collect_list_middle">
        <view class="collect_list_title">睡眠音乐</view>
        <view class="collect_list_time">2022-04-21 11:23:23</view>
        <view>
          <image class="middle_sq_start" src="../../static/images/start.png" />
        </view>
      </view>
      <view class="collect_list_button">
        <view>
          <image class="middle_sq_start" src="../../static/images/edit.png" />
        </view>
        <view class="collect_view">查看</view>
      </view>
    </view>
    <view class="collect_list">
      <view class="collect_list_img">
        <image
          class="collect_list_img_self"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="collect_list_middle">
        <view class="collect_list_title">睡眠音乐</view>
        <view class="collect_list_time">2022-04-21 11:23:23</view>
        <view>
          <image class="middle_sq_start" src="../../static/images/start.png" />
        </view>
      </view>
      <view class="collect_list_button">
        <view>
          <image class="middle_sq_start" src="../../static/images/edit.png" />
        </view>
        <view class="collect_view">查看</view>
      </view>
    </view>
    <view class="collect_list">
      <view class="collect_list_img">
        <image
          class="collect_list_img_self"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="collect_list_middle">
        <view class="collect_list_title">睡眠音乐</view>
        <view class="collect_list_time">2022-04-21 11:23:23</view>
        <view>
          <image class="middle_sq_start" src="../../static/images/start.png" />
        </view>
      </view>
      <view class="collect_list_button">
        <view>
          <image class="middle_sq_start" src="../../static/images/edit.png" />
        </view>
        <view class="collect_view">查看</view>
      </view>
    </view>
    <view class="collect_list">
      <view class="collect_list_img">
        <image
          class="collect_list_img_self"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="collect_list_middle">
        <view class="collect_list_title">睡眠音乐</view>
        <view class="collect_list_time">2022-04-21 11:23:23</view>
        <view>
          <image class="middle_sq_start" src="../../static/images/start.png" />
        </view>
      </view>
      <view class="collect_list_button">
        <view>
          <image class="middle_sq_start" src="../../static/images/edit.png" />
        </view>
        <view class="collect_view">查看</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
//
.collect_list {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  padding: 20rpx;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}

.collect_list_img {
  width: 140rpx;
  height: 140rpx;
  // height:120rpx;
}

.collect_list_img_self {
  border-radius: 20rpx;
}

.collect_list_middle {
  padding-left: 30rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.collect_list_button {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.middle_sq_start {
  width: 40rpx;
  height: 40rpx;
}

.collect_list_title {
  font-size: 30rpx;
  font-weight: 700;
}

.collect_list_time {
  font-size: 24rpx;
  color: #c7c7c7;
}

.collect_view {
  background-color: #5aa4ae;
  color: #ffffff;
  border-radius: 30rpx;
  padding: 10rpx 40rpx;
}

.collect_bg {
  background-color: #f0f3f6;
  min-height: 100vh;
  padding: 0rpx 20rpx;
}
</style>
