迁移版本
This commit is contained in:
李琦
22
components/common/Footer.vue
Normal file
22
components/common/Footer.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "Footer"
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="footer">
|
||||
<view>各位经销商：</view>
|
||||
<view>合作商请绑定公司名称与电话</view>
|
||||
<view>并联系业务经理</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footer {
|
||||
color: #999;
|
||||
margin: 50rpx auto;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
</style>
|
||||
57
components/common/HeaderSearch.vue
Normal file
57
components/common/HeaderSearch.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "HeaderSearch",
|
||||
data() {
|
||||
return {
|
||||
keyword: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goSearch() {
|
||||
console.log('跳转')
|
||||
this.$u.route({
|
||||
url: '/pages/search/search',
|
||||
params: {
|
||||
keyword: this.keyword
|
||||
}
|
||||
})
|
||||
},
|
||||
onClickIcon() {
|
||||
console.log('点击了扫码图标')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="header-search">
|
||||
<view class="left-search">
|
||||
<up-search searchIcon="scan"
|
||||
class="search"
|
||||
placeholder="输入你想查询的服务"
|
||||
v-model="keyword"
|
||||
:showAction="false"
|
||||
@focus="goSearch"
|
||||
@clickIcon="onClickIcon"
|
||||
></up-search>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header-search {
|
||||
width: 100%;
|
||||
padding: 29rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search {
|
||||
//width: 400rpx;
|
||||
}
|
||||
</style>
|
||||
43
components/common/SearchMain.vue
Normal file
43
components/common/SearchMain.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchMain",
|
||||
data() {
|
||||
return {
|
||||
keyword: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchList(value) {
|
||||
console.log('搜索关键字22：' + value)
|
||||
},
|
||||
onClickIcon() {
|
||||
console.log('点击了扫码图标')
|
||||
},
|
||||
rightClick() {
|
||||
console.log('rightClick');
|
||||
},
|
||||
leftClick() {
|
||||
console.log('leftClick');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<up-navbar
|
||||
title="个人中心"
|
||||
@rightClick="rightClick"
|
||||
:autoBack="true"
|
||||
>
|
||||
</up-navbar>
|
||||
<up-search class="search" searchIcon="scan" placeholder="输入你想查询的服务"
|
||||
@clickIcon="onClickIcon" v-model="keyword" :showAction="true" :animation="false" :actionStyle="{}" @custom="searchList"></up-search>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
315
components/index/Index.vue
Normal file
315
components/index/Index.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<script>
|
||||
import Tabs from "./Tabs.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {Tabs},
|
||||
data() {
|
||||
return {
|
||||
swiper: [
|
||||
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' },
|
||||
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
|
||||
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png' },
|
||||
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
|
||||
{ image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png' }
|
||||
],
|
||||
swiperHeight: 190, // 默认高度
|
||||
quickAccess: [
|
||||
{ name: '余额查询', icon: 'red-packet-fill' },
|
||||
{ name: '积分商城', icon: 'integral' },
|
||||
// { name: '客服中心', icon: 'kefup-ermai' },
|
||||
// { name: '优惠券', icon: 'coupon-fill' },
|
||||
// { name: '礼券中心', icon: 'gift-fill' },
|
||||
{ name: '预约列表', icon: 'calendar-fill' },
|
||||
{ name: '我的订单', icon: 'order' },
|
||||
// { name: '我的住址', icon: 'map-fill' },
|
||||
{ name: '我的收藏', icon: 'star-fill' },
|
||||
// { name: '常见问题', icon: 'question-circle' },
|
||||
// { name: '问题反馈', icon: 'error-circle-fill' },
|
||||
],
|
||||
scrollList: [
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '全屋清洁',
|
||||
price: '99.00',
|
||||
tag: '热门',
|
||||
purchased: true,
|
||||
purchaseCount: 120
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '全屋清洁',
|
||||
price: '99.00',
|
||||
tag: '热门',
|
||||
purchased: true,
|
||||
purchaseCount: 120
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '全屋清洁',
|
||||
price: '99.00',
|
||||
tag: '热门',
|
||||
purchased: true,
|
||||
purchaseCount: 120
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '全屋清洁',
|
||||
price: '99.00',
|
||||
tag: '热门',
|
||||
purchased: true,
|
||||
purchaseCount: 120
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '全屋清洁',
|
||||
price: '99.00',
|
||||
tag: '热门',
|
||||
purchased: true,
|
||||
purchaseCount: 120
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '全屋清洁',
|
||||
price: '99.00',
|
||||
tag: '热门',
|
||||
purchased: true,
|
||||
purchaseCount: 120
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '全屋清洁',
|
||||
price: '99.00',
|
||||
tag: '热门',
|
||||
purchased: true,
|
||||
purchaseCount: 120
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '深度清洁',
|
||||
price: '129.00',
|
||||
tag: '新品',
|
||||
purchased: false,
|
||||
purchaseCount: 80
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '除尘服务',
|
||||
price: '89.00',
|
||||
tag: '优惠',
|
||||
purchased: false,
|
||||
purchaseCount: 200
|
||||
},
|
||||
{
|
||||
img: 'https://images.pexels.com/photos/9594679/pexels-photo-9594679.jpeg?auto=compress&cs=tinysrgb&w=600',
|
||||
name: '家庭保洁',
|
||||
price: '119.00',
|
||||
tag: '推荐',
|
||||
purchased: true,
|
||||
purchaseCount: 150
|
||||
},
|
||||
],
|
||||
itemsPerPage: 10 // 每页显示的项数
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
paginatedQuickAccess() {
|
||||
const pages = [];
|
||||
for (let i = 0; i < this.quickAccess.length; i += this.itemsPerPage) {
|
||||
pages.push(this.quickAccess.slice(i, i + this.itemsPerPage));
|
||||
}
|
||||
return pages;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
console.log('onLoad');
|
||||
},
|
||||
mounted() {
|
||||
this.updateSwiperHeight();
|
||||
window.addEventListener('resize', this.updateSwiperHeight);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.updateSwiperHeight);
|
||||
},
|
||||
methods: {
|
||||
goToDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/info/index?name=${item.name}&price=${item.price}&img=${item.img}&tag=${item.tag}&purchaseCount=${item.purchaseCount}&purchased=${item.purchased}`
|
||||
});
|
||||
},
|
||||
updateSwiperHeight() {
|
||||
const width = window.innerWidth;
|
||||
if (width >= 1920) {
|
||||
this.swiperHeight = 600;
|
||||
} else if (width >= 1024) {
|
||||
this.swiperHeight = 500;
|
||||
} else if (width >= 768) {
|
||||
this.swiperHeight = 300;
|
||||
} else {
|
||||
this.swiperHeight = 190;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper-images">
|
||||
<up-swiper
|
||||
:list="swiper"
|
||||
keyName="image"
|
||||
circular
|
||||
:height="swiperHeight"
|
||||
indicatorActiveColor="#ff8800"
|
||||
indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
|
||||
:indicatorStyle="{ right: '20rpx' }"
|
||||
:circular="true"
|
||||
:indicator="true"
|
||||
></up-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 快捷入口 -->
|
||||
<view class="quick-access">
|
||||
<view class="title">全部功能</view>
|
||||
<swiper :indicator-dots="true" indicator-active-color="#ff8800" class="swiper">
|
||||
<swiper-item v-for="(page, pageIndex) in paginatedQuickAccess" :key="pageIndex">
|
||||
<up-grid :border="true" col="5">
|
||||
<up-grid-item
|
||||
v-for="(item, index) in page"
|
||||
:key="index"
|
||||
style="border: none !important;"
|
||||
>
|
||||
<up-icon
|
||||
:customStyle="{paddingTop: 20 + 'rpx', color: '#ff8800'}"
|
||||
:name="item.icon"
|
||||
:size="22"
|
||||
></up-icon>
|
||||
<text class="grid-text">{{ item.name }}</text>
|
||||
</up-grid-item>
|
||||
</up-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="title">推荐服务</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="box">
|
||||
|
||||
<view class="lists">
|
||||
<view class="h-item" v-for="(item, index) in scrollList" :key="index" @click="goToDetail(item)">
|
||||
<view class="left">
|
||||
<image :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="tit">
|
||||
{{ item.name }}
|
||||
<text v-if="item.purchased" class="purchased-tag">购买过</text>
|
||||
</view>
|
||||
<view class="price">价格: ￥{{ item.price }}</view>
|
||||
<view class="purchase-count">购买人数: {{ item.purchaseCount }}</view>
|
||||
</view>
|
||||
<view class="tag">{{ item.tag }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.swiper-images {
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
border: none;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 10rpx rgba(153, 153, 153, 0.3);
|
||||
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
padding: 10rpx 0 20rpx 0;
|
||||
/* #ifndef APP-PLUS */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* 服务列表 */
|
||||
.box {
|
||||
margin-top: 10px;
|
||||
padding: 30rpx 50rpx 30rpx 10rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 0 10rpx rgba(153, 153, 153, 0.3);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.h-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 0 10rpx rgba(153, 153, 153, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.h-item .left image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.h-item .info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.h-item .info .tit {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.h-item .info .price {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.h-item .info .purchase-count {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-top: 10rpx;
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
}
|
||||
|
||||
.h-item .tag {
|
||||
font-size: 24rpx;
|
||||
color: #ff8800;
|
||||
background-color: #ffe4d2;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.purchased-tag {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background-color: #ff8800;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 5rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
</style>
|
||||
44
components/index/Tabs.vue
Normal file
44
components/index/Tabs.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "Tabs",
|
||||
data() {
|
||||
return {
|
||||
tabs: [
|
||||
{
|
||||
name: "推荐",
|
||||
icon: "home-o"
|
||||
},
|
||||
{
|
||||
name: "套餐",
|
||||
icon: "apps-o"
|
||||
},
|
||||
{
|
||||
name: "全屋清洁",
|
||||
icon: "video-o"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(index) {
|
||||
console.log(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<up-tabs :list="tabs"
|
||||
@click="click"
|
||||
:activeStyle="{
|
||||
color: '#303133',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}"
|
||||
lineColor="#f56c6c"
|
||||
></up-tabs>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
227
components/tabbar/customTabbar.vue
Normal file
227
components/tabbar/customTabbar.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<view class="tab-bar-container">
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:class="['tab-item', { active: currentTab === item.pagePath, activity: item.pagePath === '/pages/activity/activity' }]"
|
||||
@click="switchTab(item.pagePath)"
|
||||
>
|
||||
<view class="icon-wrapper" :class="{ active: currentTab === item.pagePath }">
|
||||
<image :src="currentTab === item.pagePath ? item.selectedIconPath : item.iconPath" />
|
||||
<view class="text">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tab-bar-placeholder"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
selectedTab: {
|
||||
type: String,
|
||||
default: '/pages/home/home'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTab: this.selectedTab,
|
||||
list: [
|
||||
{
|
||||
text: '首页',
|
||||
pagePath: '/pages/home/home',
|
||||
iconPath: '/static/tabbar/home.png',
|
||||
selectedIconPath: '/static/tabbar/home-fill.png'
|
||||
},
|
||||
{
|
||||
text: '分类',
|
||||
pagePath: '/pages/classify/classify',
|
||||
iconPath: '/static/tabbar/classify.png',
|
||||
selectedIconPath: '/static/tabbar/classify-fill.png'
|
||||
},
|
||||
{
|
||||
text: '活动',
|
||||
pagePath: '/pages/activity/activity',
|
||||
iconPath: '/static/tabbar/activity.png',
|
||||
selectedIconPath: '/static/tabbar/activity-fill.png'
|
||||
},
|
||||
{
|
||||
text: '购物车',
|
||||
pagePath: '/pages/shoppingCart/shoppingCart',
|
||||
iconPath: '/static/tabbar/shopping-cart.png',
|
||||
selectedIconPath: '/static/tabbar/shopping-cart-fill.png'
|
||||
},
|
||||
{
|
||||
text: '我的',
|
||||
pagePath: '/pages/mine/index',
|
||||
iconPath: '/static/tabbar/mine.png',
|
||||
selectedIconPath: '/static/tabbar/mine-fill.png'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.updateCurrentTab();
|
||||
},
|
||||
mounted() {
|
||||
uni.hideTabBar();
|
||||
},
|
||||
methods: {
|
||||
switchTab(url) {
|
||||
if (this.currentTab !== url) {
|
||||
this.currentTab = url;
|
||||
uni.switchTab({ url });
|
||||
}
|
||||
},
|
||||
updateCurrentTab() {
|
||||
const currentPage = getCurrentPages().pop();
|
||||
if (currentPage && currentPage.route) {
|
||||
this.currentTab = `/${currentPage.route}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedTab(newVal) {
|
||||
this.currentTab = newVal;
|
||||
},
|
||||
'$route'() {
|
||||
this.updateCurrentTab();
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.updateCurrentTab();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-bar-container {
|
||||
position: relative;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ddd;
|
||||
height: 70px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.icon-wrapper.active {
|
||||
transform: scale(1.2);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.tab-item image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.tab-item .text {
|
||||
margin-top: 3px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.tab-item.active .text {
|
||||
color: #ff8800;
|
||||
}
|
||||
|
||||
.activity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.activity .icon-wrapper {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.activity .icon-wrapper image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.tab-bar-placeholder {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.activity::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #ff8800;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.scale-enter-active, .scale-leave-active {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.scale-enter, .scale-leave-to /* .scale-leave-active in <2.1.8 */
|
||||
{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.scale-leave-active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.slide-left-enter-active, .slide-left-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-left-enter, .slide-left-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-right-enter-active, .slide-right-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-right-enter, .slide-right-leave-to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user