|
|
@@ -0,0 +1,356 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <!-- <img class="top_image_bg" :src="mine_bg1" /> -->
|
|
|
+ <custom-layout ref="layout" :showBottom="true" :back="{show:false,logoShow:true}" v-model="dataList"
|
|
|
+ @layoutquery="onQueryList" @scroll="onScroll">
|
|
|
+ <template #navBarLeft>
|
|
|
+ <text class="ml10 nav_bar_title">专属机壳 秀出好心情</text>
|
|
|
+ </template>
|
|
|
+ <template #content>
|
|
|
+ <!-- 头部样式 -->
|
|
|
+ <view class="top_card mt10">
|
|
|
+ <view class="top_card_l">
|
|
|
+ <view class="top_card_l_t">
|
|
|
+ <view class="top_card_l_t_l">
|
|
|
+ <image class="l_t_l_icon" mode="aspectFit" :src="qing"></image>
|
|
|
+ <text class="l_t_l_text">智能小印</text>
|
|
|
+ </view>
|
|
|
+ <view class="top_card_l_t_r"></view>
|
|
|
+ </view>
|
|
|
+ <view class="top_card_l_b">
|
|
|
+ <up-icon custom-prefix="iconfont" name="icon-icon_aifilter" size="30"></up-icon>
|
|
|
+ <view class="top_card_l_b_c">
|
|
|
+ AI漫画风
|
|
|
+ </view>
|
|
|
+ <view class="l_b_button">
|
|
|
+ 一键生成
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top_card_r">
|
|
|
+ <view class="top_card_r_t">
|
|
|
+ <view class="">
|
|
|
+ <up-icon custom-prefix="iconfont" name="icon-icon_picture" size="30"></up-icon>
|
|
|
+ </view>
|
|
|
+ <view class="top_card_r_i">
|
|
|
+ <view class="top_card_r_i_text">导入图片</view>
|
|
|
+ <up-icon custom-prefix="iconfont" name="icon-icon_next" size="50rpx"></up-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top_card_r_b">
|
|
|
+ <view class="">
|
|
|
+ <up-icon custom-prefix="iconfont" name="icon-icon_cutout" size="30"></up-icon>
|
|
|
+ </view>
|
|
|
+ <view class="top_card_r_i">
|
|
|
+ <view class="top_card_r_i_text">背景分离</view>
|
|
|
+ <up-icon custom-prefix="iconfont" name="icon-icon_next" size="50rpx"></up-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <up-sticky offset-top="0" customNav-height="0" :bg-color="scrollTop > 170 ? bgColor:''">
|
|
|
+ <view class="tabs_list_box">
|
|
|
+ <view class="tabs_list">
|
|
|
+ <up-tabs :list="tabs" :line-height="0"
|
|
|
+ :active-style="{'fontSize':'30rpx','fontWeight':'600'}"></up-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="tabs-rigth-fixed" @click="onNavigateTo('/pages/index/fortune')">
|
|
|
+ <up-icon custom-prefix="iconfont" name="icon-huoyan" size="34rpx"
|
|
|
+ color="rgba(237, 100, 100, 1)"></up-icon>
|
|
|
+ <text>运势UP!</text>
|
|
|
+ <up-icon name="arrow-right" size="24rpx"></up-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </up-sticky>
|
|
|
+ <view class="demo-uni-row">
|
|
|
+ <view class="demo-uni-col" v-for="(item,index) in dataList" :key="index"
|
|
|
+ @click="onNavigateTo('/pages/index/canvas_edit')"></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </custom-layout>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ onLoad
|
|
|
+ } from '@dcloudio/uni-app'
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ computed
|
|
|
+ } from 'vue'
|
|
|
+
|
|
|
+ import useSystemStore from "~@/store/system.js"
|
|
|
+
|
|
|
+ import qing from '~@/static/images/qing.png'
|
|
|
+ import iconNext from '~@/static/images/icon_next.svg'
|
|
|
+ const {
|
|
|
+ bgColor
|
|
|
+ } = useSystemStore()
|
|
|
+ const tabs = ref([{
|
|
|
+ state: -1,
|
|
|
+ name: '热门新款',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 1,
|
|
|
+ name: '简约'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 2,
|
|
|
+ name: '卡通'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 3,
|
|
|
+ name: '复古'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 4,
|
|
|
+ name: '运动'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 5,
|
|
|
+ name: '艺术'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 6,
|
|
|
+ name: '运动'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: 7,
|
|
|
+ name: '艺术'
|
|
|
+ },
|
|
|
+ ])
|
|
|
+
|
|
|
+ const dataList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ])
|
|
|
+ const num = ref(1)
|
|
|
+ const layout = ref()
|
|
|
+ const onQueryList = (event) => {
|
|
|
+ const {
|
|
|
+ pageNo,
|
|
|
+ pageSize
|
|
|
+ } = event
|
|
|
+ if (pageNo > 1) {
|
|
|
+ if (num.value < 2) {
|
|
|
+ num.value++
|
|
|
+ layout.value.complete(dataList.value);
|
|
|
+ } else {
|
|
|
+ layout.value.complete([]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ num.value = 2
|
|
|
+ layout.value.complete(dataList.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 页面跳转
|
|
|
+ const onNavigateTo = (event) => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: event,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 检测页面滚动
|
|
|
+ const scrollTop = ref(0)
|
|
|
+ const onScroll = (event) => {
|
|
|
+ scrollTop.value = event
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .nav_bar_title {
|
|
|
+ font-family: SmileySans-Oblique-2;
|
|
|
+ color: rgba(128, 128, 128, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // ===头部卡片样式===
|
|
|
+ .top_card {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ padding: 0 26rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ .top_card_l {
|
|
|
+ width: 46%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -1;
|
|
|
+
|
|
|
+ .top_card_l_t {
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .top_card_l_t_l {
|
|
|
+ height: calc(100%);
|
|
|
+ width: calc(76%);
|
|
|
+ background: linear-gradient(153.36deg, rgba(144, 252, 205, 1) 0%, rgba(176, 242, 255, 1) 100%);
|
|
|
+ position: relative;
|
|
|
+ top: 20rpx;
|
|
|
+ bottom: 60rpx;
|
|
|
+ border-radius: 20rpx 0 0 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-image: radial-gradient(20rpx at 0rpx 0rpx, rgba(176, 242, 255, 1) 20rpx, #fff 20rpx);
|
|
|
+ bottom: 20rpx;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l_t_l_icon {
|
|
|
+ position: absolute;
|
|
|
+ top: -42rpx;
|
|
|
+ left: -20rpx;
|
|
|
+ z-index: 20;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l_t_l_text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0rpx;
|
|
|
+ color: rgba(53, 161, 171, 1);
|
|
|
+ text-align: right;
|
|
|
+ vertical-align: top;
|
|
|
+ word-break: keep-all;
|
|
|
+ position: absolute;
|
|
|
+ top: 24rpx;
|
|
|
+ right: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_card_l_t_r {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
+ width: 24%;
|
|
|
+ border-radius: 20rpx 0 0 0;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_card_l_b {
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100rpx);
|
|
|
+ border-radius: 20rpx 0 0 20rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .top_card_l_b_c {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(11, 17, 23, 1);
|
|
|
+ margin: 4rpx 0 16rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .l_b_button {
|
|
|
+ width: fit-content;
|
|
|
+ height: 34rpx;
|
|
|
+ border-radius: 160rpx;
|
|
|
+ background: rgba(17, 20, 7, 1);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18rpx;
|
|
|
+ line-height: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_card_r {
|
|
|
+ width: 57%;
|
|
|
+ border-left: 1rpx solid rgba(242, 245, 247, 1);
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 0 20rpx 20rpx 0;
|
|
|
+
|
|
|
+ .top_card_r_t {
|
|
|
+ border-bottom: 1rpx solid rgba(242, 245, 247, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .top_card_r_t,
|
|
|
+ .top_card_r_b {
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .top_card_r_i {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .top_card_r_i_text {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // ======导航标签right标签=======
|
|
|
+ .tabs_list_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tabs_list {
|
|
|
+ width: calc(100% - 160rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-rigth-fixed {
|
|
|
+ background: rgba(149, 250, 213, 1);
|
|
|
+ border-radius: 50rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 6rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: SmileySans-Oblique-2;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // ======liet样式=======
|
|
|
+ .demo-uni-row {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 26rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .demo-uni-col {
|
|
|
+ width: calc((100% / 3) - 8rpx);
|
|
|
+ height: 400rpx;
|
|
|
+ background-color: #ccc;
|
|
|
+ border-radius: 13px;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ &:nth-child(3n - 1) {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
