From 20d63bf572e4d8e2ee94fb038a658a63c609e7ae Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期一, 16 十月 2023 13:38:38 +0800
Subject: [PATCH] #
---
pages/home/home - 副本.vue | 98 ++++++++++++
pages/home/home.vue | 279 ++++++++++++++++++++++++++--------
pages/project/project.json | 34 +++
pages/LoginDemo/LoginDemo.vue | 11 +
4 files changed, 345 insertions(+), 77 deletions(-)
diff --git a/pages/LoginDemo/LoginDemo.vue b/pages/LoginDemo/LoginDemo.vue
index c092a01..590a03f 100644
--- a/pages/LoginDemo/LoginDemo.vue
+++ b/pages/LoginDemo/LoginDemo.vue
@@ -61,6 +61,7 @@
<script>
// import { data } from 'jquery'
+ import { mapState } from 'vuex'//寮曞叆mapState
import md5 from '../../static/js/md5.js'
export default {
data() {
@@ -77,6 +78,9 @@
},
}
},
+ computed: mapState({
+ project: state => state.project
+ }) ,
mounted() {
uni.getSystemInfo({
success(res) {
@@ -114,8 +118,9 @@
title: '璇烽厤缃綉缁滀俊鎭�'
})
}
- path = network[0].address
- path = path.substring(0, path.length - 3);
+ // path = network[0].address
+ // path = path.substring(0, path.length - 3);
+ path = _this.project.name
let baseUrl = `http://${network[0].ip}:${network[0].port}/${network[0].address}`
uni.request({
url: `${baseUrl}/login.action`,
@@ -136,7 +141,7 @@
})
setTimeout(() => {
uni.reLaunch({
- url: `/pages/project/${path}/home/home`,
+ url: `/pages/home/home`,
});
}, 300)
}, 700)
diff --git "a/pages/home/home - \345\211\257\346\234\254.vue" "b/pages/home/home - \345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..9e928f6
--- /dev/null
+++ "b/pages/home/home - \345\211\257\346\234\254.vue"
@@ -0,0 +1,98 @@
+<template>
+ <view>
+ <text>{{username}}</text>
+ <text>{{age}}</text>
+ <view class="z-swiper">
+ <view>
+ 浠婃棩鍏ュ簱 100
+ </view>
+ <view>
+ 浠婃棩鍑哄簱 100
+ </view>
+ <view>
+ 鍏ュ簱鍗曞搧
+ </view>
+ <view>
+ Top 1. 鍐荤尓纰庤倝
+ Top 2. 鍐荤尓鎺�
+ </view>
+ </view>
+ <view class="home-list" v-for="(item,i) in homeList" :key="i">
+ <view class="list-title flex-align-center">
+ <view class="list-title-tag "></view>
+ <view>{{item.name}}</view>
+ </view>
+ <view class="list-detl">
+ <view v-for="nav in item.nav">
+ <view style="margin: 10px;">
+ {{nav.name}}
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import { mapState } from 'vuex'//寮曞叆mapState
+ export default {
+ data() {
+ return {}
+ },
+ onShow() {
+ console.log(this.project);
+ },
+ computed: mapState({
+ // 浠巗tate涓嬁鍒版暟鎹� 绠ご鍑芥暟鍙娇浠ｇ爜鏇寸畝缁�
+ username: state => state.username,
+ age: state => state.age,
+ homeList: state => state.homeList,
+ project: state => state.project
+ })
+ }
+</script>
+
+<style>
+ .flex-justify-center {
+ display: flex;
+ justify-content: center;
+ }
+ .flex-align-center {
+ display: flex;
+ align-items: center;
+
+ }
+ .z-swiper {
+ height: 90px;
+ margin: 8px;
+ border-radius: 8px;
+ background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
+ color: #fff;
+ }
+ .home-list {
+ display: flex;
+ flex-direction: column;
+ height: 90px;
+ margin: 8px;
+ border-radius: 8px;
+ background-color: #f5f5f5;
+ }
+ .list-title {
+ display: flex;
+ height: 20px;
+ margin: 10px 10px;
+ /* background-color: #fff; */
+ }
+ .list-title-tag {
+ width: 6px;
+ height: 20px;
+ margin: 5px 5px;
+ border-radius: 8px;
+ background-color: #00aeec;
+
+ }
+ .list-detl {
+ display: flex;
+ flex-direction: row;
+ }
+</style>
\ No newline at end of file
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 9e928f6..e2a2d97 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -1,35 +1,20 @@
<template>
<view>
- <text>{{username}}</text>
- <text>{{age}}</text>
- <view class="z-swiper">
- <view>
- 浠婃棩鍏ュ簱 100
+ <scroll-view scroll-y class="page">
+ <view class="nav-list">
+ <navigator hover-class='none' class="nav-li" navigateTo
+ :url="'/pages' + item.url"
+ :class="'bg-'+item.color"
+ :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1',width: item.width}]"
+ v-for="(item,index) in menu"
+ :key="index">
+ <view class="nav-title">{{item.title}}</view>
+ <view class="nav-name">{{item.name}}</view>
+ <text :class="'cuIcon-' + item.cuIcon"></text>
+ </navigator>
</view>
- <view>
- 浠婃棩鍑哄簱 100
- </view>
- <view>
- 鍏ュ簱鍗曞搧
- </view>
- <view>
- Top 1. 鍐荤尓纰庤倝
- Top 2. 鍐荤尓鎺�
- </view>
- </view>
- <view class="home-list" v-for="(item,i) in homeList" :key="i">
- <view class="list-title flex-align-center">
- <view class="list-title-tag "></view>
- <view>{{item.name}}</view>
- </view>
- <view class="list-detl">
- <view v-for="nav in item.nav">
- <view style="margin: 10px;">
- {{nav.name}}
- </view>
- </view>
- </view>
- </view>
+ <view class="cu-tabbar-height"></view>
+ </scroll-view>
</view>
</template>
@@ -40,59 +25,217 @@
return {}
},
onShow() {
- console.log(this.project);
+ console.log(this.menu);
},
computed: mapState({
- // 浠巗tate涓嬁鍒版暟鎹� 绠ご鍑芥暟鍙娇浠ｇ爜鏇寸畝缁�
- username: state => state.username,
- age: state => state.age,
- homeList: state => state.homeList,
- project: state => state.project
+ menu: state => state.project.menu
})
}
</script>
<style>
- .flex-justify-center {
+ @import url("../../static/css/colorUi/icon.css");
+ .nav-list {
display: flex;
- justify-content: center;
+ flex-wrap: wrap;
+ padding: 0px 20rpx 0px;
+ justify-content: space-between;
}
- .flex-align-center {
- display: flex;
- align-items: center;
-
+
+ .nav-li {
+ padding: 30upx;
+ border-radius: 12upx;
+ width: 37%;
+ margin: 0 2% 40upx;
+ /* background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); */
+ background-size: cover;
+ background-position: center;
+ position: relative;
+ z-index: 1;
}
- .z-swiper {
- height: 90px;
- margin: 8px;
- border-radius: 8px;
- background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
+
+ .nav-li::after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ background-color: inherit;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ bottom: -10%;
+ border-radius: 10upx;
+ opacity: 0.2;
+ transform: scale(0.9, 0.9);
+ }
+
+ .nav-li.cur {
color: #fff;
+ background: rgb(94, 185, 94);
+ box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
}
- .home-list {
- display: flex;
- flex-direction: column;
- height: 90px;
- margin: 8px;
- border-radius: 8px;
- background-color: #f5f5f5;
+
+ .nav-title {
+ font-size: 32upx;
+ font-weight: 300;
}
- .list-title {
- display: flex;
- height: 20px;
- margin: 10px 10px;
- /* background-color: #fff; */
+
+ .nav-title::first-letter {
+ font-size: 40upx;
+ margin-right: 4upx;
}
- .list-title-tag {
- width: 6px;
- height: 20px;
- margin: 5px 5px;
- border-radius: 8px;
- background-color: #00aeec;
-
+
+ .nav-name {
+ font-size: 28upx;
+ text-transform: Capitalize;
+ margin-top: 20upx;
+ position: relative;
}
- .list-detl {
- display: flex;
- flex-direction: row;
+
+ .nav-name::before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: 40upx;
+ height: 6upx;
+ background: #fff;
+ bottom: 0;
+ right: 0;
+ opacity: 0.5;
+ }
+
+ .nav-name::after {
+ content: "";
+ position: absolute;
+ display: block;
+ width: 100upx;
+ height: 1px;
+ background: #fff;
+ bottom: 0;
+ right: 40upx;
+ opacity: 0.3;
+ }
+
+ .nav-name::first-letter {
+ font-weight: bold;
+ font-size: 36upx;
+ margin-right: 1px;
+ }
+
+ .nav-li text {
+ position: absolute;
+ right: 30upx;
+ top: 30upx;
+ font-size: 52upx;
+ width: 60upx;
+ height: 60upx;
+ text-align: center;
+ line-height: 60upx;
+ }
+
+ .text-light {
+ font-weight: 300;
+ }
+
+ @keyframes show {
+ 0% {
+ transform: translateY(-50px);
+ }
+
+ 60% {
+ transform: translateY(40upx);
+ }
+
+ 100% {
+ transform: translateY(0px);
+ }
+ }
+
+ @-webkit-keyframes show {
+ 0% {
+ transform: translateY(-50px);
+ }
+
+ 60% {
+ transform: translateY(40upx);
+ }
+
+ 100% {
+ transform: translateY(0px);
+ }
+ }
+
+ .bg-red {
+ background-color: #e54d42;
+ color: #ffffff;
+ }
+
+ .bg-orange {
+ background-color: #f37b1d;
+ color: #ffffff;
+ }
+
+ .bg-yellow {
+ background-color: #fbbd08;
+ color: #333333;
+ }
+
+ .bg-olive {
+ background-color: #8dc63f;
+ color: #ffffff;
+ }
+
+ .bg-green {
+ background-color: #39b54a;
+ color: #ffffff;
+ }
+
+ .bg-cyan {
+ background-color: #1cbbb4;
+ color: #ffffff;
+ }
+
+ .bg-blue {
+ background-color: #0081ff;
+ color: #ffffff;
+ }
+
+ .bg-purple {
+ background-color: #6739b6;
+ color: #ffffff;
+ }
+
+ .bg-mauve {
+ background-color: #9c26b0;
+ color: #ffffff;
+ }
+
+ .bg-pink {
+ background-color: #e03997;
+ color: #ffffff;
+ }
+
+ .bg-brown {
+ background-color: #a5673f;
+ color: #ffffff;
+ }
+
+ .bg-grey {
+ background-color: #8799a3;
+ color: #ffffff;
+ }
+
+ .bg-gray {
+ background-color: #f0f0f0;
+ color: #333333;
+ }
+
+ .bg-black {
+ background-color: #333333;
+ color: #ffffff;
+ }
+
+ .bg-white {
+ background-color: #ffffff;
+ color: #666666;
}
</style>
\ No newline at end of file
diff --git a/pages/project/project.json b/pages/project/project.json
index 2deaad4..e10dc39 100644
--- a/pages/project/project.json
+++ b/pages/project/project.json
@@ -1,9 +1,31 @@
{
- "phps": {
- "name":"骞虫箹鍝佷笂鏂板彂鐜�",
- "menu": [
- {"name": "缁勬墭鍏ュ簱"},
- {"name": "璁㈠崟缁勬墭"}
- ]
+ "title":"骞虫箹鍝佷笂鏂板彂鐜�",
+ "name": "ps",
+ "menu": [
+ {
+ "title": "缁勬墭鍏ュ簱",
+ "name": "pakin",
+ "url": "/pakin/pakin",
+ "color": "cyan",
+ "cuIcon": "pullup",
+ "width": "90%",
+ "sort": 1
+ },
+ {
+ "title": "璁㈠崟缁勬墭",
+ "name": "orderPakin",
+ "url": "/pakin/pakin",
+ "color": "green",
+ "cuIcon": "order",
+ "sort": 2
+ },
+ {
+ "title": "璁㈠崟缁勬墭",
+ "name": "orderPakin",
+ "url": "/pakin/pakin",
+ "color": "green",
+ "cuIcon": "order",
+ "sort": 2
}
+ ]
}
\ No newline at end of file
--
Gitblit v1.9.1