|
|
@@ -1,365 +0,0 @@
|
|
|
-<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">
|
|
|
- <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="onFortune">
|
|
|
- <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"></view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </custom-layout>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
- import {
|
|
|
- onLoad
|
|
|
- } from '@dcloudio/uni-app'
|
|
|
- import {
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- computed
|
|
|
- } from 'vue'
|
|
|
- import {
|
|
|
- storeToRefs
|
|
|
- } from 'pinia'
|
|
|
- import {
|
|
|
- useSystemStore
|
|
|
- } from "@/store/index.js"
|
|
|
- const store = useSystemStore()
|
|
|
- import qing from '~@/static/images/qing.png'
|
|
|
- import iconNext from '~@/static/images/icon_next.svg'
|
|
|
-
|
|
|
- const {
|
|
|
- bgColor
|
|
|
- } = storeToRefs(store)
|
|
|
-
|
|
|
- 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 onFortune = () => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/index/fortune',
|
|
|
- })
|
|
|
- }
|
|
|
- // 检测页面滚动
|
|
|
- const scrollTop = ref(0)
|
|
|
- const onScroll = (event) => {
|
|
|
- scrollTop.value = event
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- @import url('~@/static/font/SmileySans-Oblique-2.css');
|
|
|
-
|
|
|
- .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;
|
|
|
- margin-top: 10rpx;
|
|
|
-
|
|
|
- .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>
|
