From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 13:12:48 +0800
Subject: [PATCH] 项目初始化
---
src/pages_qiun/components/card-swiper/card-swiper.vue | 148 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 148 insertions(+), 0 deletions(-)
diff --git a/src/pages_qiun/components/card-swiper/card-swiper.vue b/src/pages_qiun/components/card-swiper/card-swiper.vue
new file mode 100644
index 0000000..7bb2a6c
--- /dev/null
+++ b/src/pages_qiun/components/card-swiper/card-swiper.vue
@@ -0,0 +1,148 @@
+<template>
+ <view>
+ <view class="top-swiper">
+ <view class="box">
+ <view style="height: 44px;"></view>
+ <swiper class="swiper" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true"
+ @change="swiperChange">
+ <swiper-item v-for="(item,index) in card_menu" :key="index" @click="toUrl(item.url)">
+ <!-- <image class='le-img' :src='item' :class="{'le-active':swiper.index == index}"></image> -->
+ <view class="le-img" :class="{'le-active':swiper.index == index}">
+ <view class="img_box">
+ <image class="card_img" :src="item.img" mode="aspectFill"></image>
+ </view>
+ <view class="detail_box">
+ <view class="title_box">{{item.title}}</view>
+ <view class="author_box">By:{{item.author}}</view>
+ </view>
+ </view>
+ </swiper-item>
+ </swiper>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import Common from '../../static/js/common'
+ export default {
+ props: {
+ card_menu: {
+ type: Array,
+ default: []
+ }
+ },
+ data() {
+ return {
+ swiper: {
+ margin: "150rpx",
+ index: 0,
+ list: [
+ "/static/images/douyin/0.jpg",
+ "/static/images/douyin/4.jpg",
+ "/static/images/douyin/7.jpg",
+ ]
+ }
+ }
+ },
+ components: {
+
+ },
+ mounted() {
+
+ },
+ methods: {
+ //swiper婊戝姩浜嬩欢
+ swiperChange: function(e) {
+ this.swiper.index = e.detail.current;
+ },
+ toUrl(url){
+ Common.navigateTo(url);
+ }
+ }
+ }
+</script>
+
+<style lang="scss">
+ .top-swiper {
+ margin-bottom: 30rpx;
+
+ .box {
+ padding-top: var(--status-bar-height);
+ box-sizing: content-box;
+ position: absolute;
+ z-index: 5;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: auto;
+ }
+
+ .swiper {
+ height: 600rpx;
+ margin: 0 20rpx;
+
+ .le-img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ transform: scale(0.9);
+ transition: transform 0.3s ease-in-out 0s;
+ border-radius: 10px;
+ background-color: #fff;
+ overflow: hidden;
+
+ &.le-active {
+ transform: scale(1);
+ }
+
+ .img_box {
+ width: 100%;
+ height: 65%;
+ overflow: hidden;
+
+ .card_img {
+ height: 100%;
+ width: 100%;
+ }
+ }
+
+ .detail_box {
+ width: 100%;
+ height: 35%;
+ overflow: hidden;
+
+ .title_box {
+ width: 100%;
+ text-align: center;
+ font-size: 40rpx;
+ margin: 30rpx 0;
+ }
+
+
+
+ .author_box {
+ width: 100%;
+ text-align: center;
+ font-size: 30rpx;
+ position: relative;
+ height: 80rpx;
+ line-height: 80rpx;
+
+ &::before {
+ content: "";
+ height: 1px;
+ width: 150rpx;
+ position: absolute;
+ transform: translateX(-50%);
+ left: 50%;
+ top: 0;
+ background: #000;
+ }
+ }
+ }
+ }
+
+ }
+ }
+</style>
--
Gitblit v1.9.3