From 1e7de5b9103999800062f1e6b18d94fd93f3ef06 Mon Sep 17 00:00:00 2001
From: LSH
Date: 星期五, 23 九月 2022 14:21:03 +0800
Subject: [PATCH] #可回退版本
---
pages/demo/index.vue | 86 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 85 insertions(+), 1 deletions(-)
diff --git a/pages/demo/index.vue b/pages/demo/index.vue
index f93ca81..eddec81 100644
--- a/pages/demo/index.vue
+++ b/pages/demo/index.vue
@@ -1,11 +1,95 @@
<template>
<view>
-
+ <view class="two-cols home-nav-item" v-for="(item,index) in navs" @click="click(index)" :class="item.clicked"
+ @touchstart="touch(index)" @touchend="touchend(index)">
+ <view class="nav-icon">
+ <uni-icons :type="item.icon" size="60" color="#6c6c6c"></uni-icons>
+ </view>
+ <view class="nav-text">
+ {{item.name}}
+ </view>
+ </view>
</view>
</template>
<script>
+ export default{
+ data() {
+ return {
+ navs:[
+ {
+ name:'鍏ュ簱',
+ icon:'download',
+ clicked:''
+ },
+ {
+ name:'鍑哄簱',
+ icon:'upload',
+ clicked:''
+ },
+ {
+ name:'鐩樼偣',
+ icon:'compose',
+ clicked:''
+ },
+ {
+ name:'閫�鍑虹櫥褰�',
+ icon:'close',
+ clicked:''
+ },
+ ],
+
+ }
+ },
+ methods: {
+ click(index) {
+
+ },
+ touch(index) {
+ this.navs[index].clicked = 'grey'
+ // setTimeout(()=>{
+
+ // },100)
+ },
+ touchend(index) {
+ this.navs[index].clicked = ''
+ }
+ }
+ }
</script>
<style>
+ @import url("@/static/css/common.css");
+ .home-nav-item {
+ width: 44%;
+ height: 0;
+ padding-bottom: 50%;
+ margin-left: 4%;
+ margin-top: 5%;
+ display: inline-block;
+ box-shadow: 0 0 2px #dcdcdc;
+ /* border: 1px solid #dcdcdc;
+ border-right: 1px solid #dcdcdc;
+ border-left: 1px solid #dcdcdc; */
+ }
+ .home-nav-item:first-child {
+
+ }
+ .nav-icon {
+ width: 60%;
+ height: 0;
+ padding-bottom: 60%;
+ margin: 10% auto;
+ text-align: center;
+ }
+ .nav-text {
+ width: 100%;
+ height: 0;
+ margin-bottom: 20%;
+ font-size: 32rpx;
+ text-align: center;
+ }
+ .grey {
+ background-color: #dcdcdc;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1