Gary
4 weeks ago
parent
f2d55881c5
commit
a629d49cce
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions">
|
||||
<TaskOptions isEnabled="true">
|
||||
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
|
||||
<option name="checkSyntaxErrors" value="true" />
|
||||
<option name="description" />
|
||||
<option name="exitCodeBehavior" value="ERROR" />
|
||||
<option name="fileExtension" value="scss" />
|
||||
<option name="immediateSync" value="true" />
|
||||
<option name="name" value="SCSS" />
|
||||
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
|
||||
<option name="outputFilters">
|
||||
<array />
|
||||
</option>
|
||||
<option name="outputFromStdout" value="false" />
|
||||
<option name="program" value="sass" />
|
||||
<option name="runOnExternalChanges" value="true" />
|
||||
<option name="scopeName" value="Project Files" />
|
||||
<option name="trackOnlyRoot" value="true" />
|
||||
<option name="workingDir" value="$FileDir$" />
|
||||
<envs />
|
||||
</TaskOptions>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,141 @@
|
||||
<!-- TabBar.vue -->
|
||||
<template>
|
||||
<view>
|
||||
<image class="bar" src="/static/components/tarbar/pictures/bar.png"></image>
|
||||
|
||||
<!-- Home 图标 -->
|
||||
<image class="home"
|
||||
src="/static/components/tarbar/pictures/home.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_home"
|
||||
src="/static/components/tarbar/pictures/home_picked_up.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Community 图标 -->
|
||||
<image class="community"
|
||||
src="/static/components/tarbar/pictures/community.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_community"
|
||||
src="/static/components/tarbar/pictures/community_pick_up.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Assistant 图标 -->
|
||||
<image class="assistant"
|
||||
src="/static/components/tarbar/pictures/assistant.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_assistant"
|
||||
src="/static/components/tarbar/pictures/assistant_picked_up.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- User 图标 -->
|
||||
<image class="user"
|
||||
src="/static/components/tarbar/pictures/user.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_user"
|
||||
src="/static/components/tarbar/pictures/user_picked_up.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
is_home_picked_up: false,
|
||||
is_communnity_picked_up: false,
|
||||
is_assistant_picked_up: false,
|
||||
is_user_picked_up: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
pick_up_home() {
|
||||
this.resetPicks();
|
||||
this.is_home_picked_up = true;
|
||||
uni.navigateTo({
|
||||
url: '/pages/homepages/home/home', // 使用 navigateTo
|
||||
});
|
||||
},
|
||||
pick_up_community() {
|
||||
this.resetPicks();
|
||||
this.is_communnity_picked_up = true;
|
||||
uni.navigateTo({
|
||||
url: '/pages/homepages/community/community',
|
||||
});
|
||||
},
|
||||
pick_up_assistant() {
|
||||
this.resetPicks();
|
||||
this.is_assistant_picked_up = true;
|
||||
uni.navigateTo({
|
||||
url: '/pages/homepages/puppy_chat/puppy_chat',
|
||||
});
|
||||
},
|
||||
pick_up_user() {
|
||||
this.resetPicks();
|
||||
this.is_user_picked_up = true;
|
||||
uni.navigateTo({
|
||||
url: '/pages/homepages/user/user',
|
||||
});
|
||||
},
|
||||
resetPicks() {
|
||||
this.is_home_picked_up = false;
|
||||
this.is_communnity_picked_up = false;
|
||||
this.is_assistant_picked_up = false;
|
||||
this.is_user_picked_up = false;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.bar {
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
height: 10%;
|
||||
bottom: 1%;
|
||||
left: 2.5%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.home, .community, .assistant, .user {
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
height: 6%;
|
||||
bottom: 2%;
|
||||
transition: opacity 0.3s ease; /* 添加渐变过渡 */
|
||||
}
|
||||
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
|
||||
position: absolute;
|
||||
width: 17%;
|
||||
height: 10%;
|
||||
bottom: 2%;
|
||||
transition: opacity 0.3s ease; /* 添加渐变过渡 */
|
||||
}
|
||||
|
||||
/* 图标位置调整 */
|
||||
.home { left: 6%; }
|
||||
.pick_up_home { left: 6%; }
|
||||
.community { left: 30%; }
|
||||
.pick_up_community { left: 30%; }
|
||||
.assistant { left: 54%; }
|
||||
.pick_up_assistant { left: 54%; }
|
||||
.user { left: 78%; }
|
||||
.pick_up_user { left: 78%; }
|
||||
</style>
|
||||
@ -0,0 +1,153 @@
|
||||
<!-- TabBar.vue -->
|
||||
<template>
|
||||
|
||||
<view class="bar_background"></view>
|
||||
|
||||
<!-- Home 图标 -->
|
||||
<image class="home"
|
||||
src="/static/components/tarbar/pictures/home.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_home"
|
||||
src="/static/components/tarbar/pictures/home_picked_up.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Community 图标 -->
|
||||
<image class="pick_up_community"
|
||||
src="/static/components/tarbar/pictures/community_pick_up.png"
|
||||
@click="pick_up_community">
|
||||
</image>
|
||||
|
||||
<!-- Assistant 图标 -->
|
||||
<image class="assistant"
|
||||
src="/static/components/tarbar/pictures/assistant.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_assistant"
|
||||
src="/static/components/tarbar/pictures/assistant_picked_up.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- User 图标 -->
|
||||
<image class="user"
|
||||
src="/static/components/tarbar/pictures/user.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_user"
|
||||
src="/static/components/tarbar/pictures/user_picked_up.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
is_home_picked_up: false,
|
||||
is_communnity_picked_up: false,
|
||||
is_assistant_picked_up: false,
|
||||
is_user_picked_up: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
pick_up_home() {
|
||||
this.resetPicks();
|
||||
this.is_home_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/home/home', // 使用 navigateTo
|
||||
});
|
||||
},
|
||||
pick_up_community() {
|
||||
this.resetPicks();
|
||||
this.is_communnity_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/community/community',
|
||||
});
|
||||
},
|
||||
pick_up_assistant() {
|
||||
this.resetPicks();
|
||||
this.is_assistant_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/puppy_chat/puppy_chat',
|
||||
});
|
||||
},
|
||||
pick_up_user() {
|
||||
this.resetPicks();
|
||||
this.is_user_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/user/user',
|
||||
});
|
||||
},
|
||||
resetPicks() {
|
||||
this.is_home_picked_up = false;
|
||||
this.is_communnity_picked_up = false;
|
||||
this.is_assistant_picked_up = false;
|
||||
this.is_user_picked_up = false;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@keyframes colorTransition {
|
||||
from {
|
||||
background-color: #5858cd;
|
||||
}
|
||||
to {
|
||||
background-color: #E9D0D0;
|
||||
}
|
||||
}
|
||||
.bar_background{
|
||||
position: absolute;
|
||||
width: 95%; /* 宽度占95% */
|
||||
height: 10%; /* 高度 */
|
||||
bottom: 1.2%; /* 距离底部2% */
|
||||
left: 2.5%; /* 左侧2.5% */
|
||||
background-color: khaki; /* 初始颜色 */
|
||||
border-radius: 37px; /* 圆角半径，可以根据需要调整 */
|
||||
z-index: -1; /* 使背景框在其他元素后面 */
|
||||
animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.home, .community, .assistant, .user {
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
height: 6%;
|
||||
bottom: 2%;
|
||||
transition: opacity 0.7s ease; /* 添加渐变过渡 */
|
||||
|
||||
}
|
||||
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
|
||||
position: absolute;
|
||||
width: 17%;
|
||||
height: 10%;
|
||||
bottom: 2%;
|
||||
transition: opacity 1s ease; /* 添加渐变过渡 */
|
||||
|
||||
}
|
||||
|
||||
/* 图标位置调整 */
|
||||
.home { left: 6%; }
|
||||
.pick_up_home { left: 6%; }
|
||||
.community { left: 30%; }
|
||||
.pick_up_community { left: 30%; }
|
||||
.assistant { left: 54%; }
|
||||
.pick_up_assistant { left: 54%; }
|
||||
.user { left: 78%; }
|
||||
.pick_up_user { left: 78%; }
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<!-- TabBar.vue -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="bar_background"></view>
|
||||
<!-- Home 图标 -->
|
||||
|
||||
<image class="pick_up_home"
|
||||
src="/static/components/tarbar/pictures/home_picked_up.png"
|
||||
@click="pick_up_home">
|
||||
</image>
|
||||
<!-- Community 图标 -->
|
||||
<image class="community"
|
||||
src="/static/components/tarbar/pictures/community.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_community"
|
||||
src="/static/components/tarbar/pictures/community_pick_up.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Assistant 图标 -->
|
||||
<image class="assistant"
|
||||
src="/static/components/tarbar/pictures/assistant.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_assistant"
|
||||
src="/static/components/tarbar/pictures/assistant_picked_up.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- User 图标 -->
|
||||
<image class="user"
|
||||
src="/static/components/tarbar/pictures/user.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_user"
|
||||
src="/static/components/tarbar/pictures/user_picked_up.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
is_communnity_picked_up: false,
|
||||
is_assistant_picked_up: false,
|
||||
is_user_picked_up: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
pick_up_home() {
|
||||
this.resetPicks();
|
||||
this.is_home_picked_up = true;
|
||||
},
|
||||
pick_up_community() {
|
||||
this.resetPicks();
|
||||
this.is_communnity_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/community/community',
|
||||
});
|
||||
},
|
||||
pick_up_assistant() {
|
||||
this.resetPicks();
|
||||
this.is_assistant_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/puppy_chat/puppy_chat',
|
||||
});
|
||||
},
|
||||
pick_up_user() {
|
||||
this.resetPicks();
|
||||
this.is_user_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/user/user',
|
||||
});
|
||||
},
|
||||
resetPicks() {
|
||||
this.is_home_picked_up = false;
|
||||
this.is_communnity_picked_up = false;
|
||||
this.is_assistant_picked_up = false;
|
||||
this.is_user_picked_up = false;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
|
||||
@keyframes colorTransition {
|
||||
from {
|
||||
background-color: #5858cd;
|
||||
}
|
||||
to {
|
||||
background-color: #E9D0D0;
|
||||
}
|
||||
}
|
||||
.bar_background{
|
||||
position: absolute;
|
||||
width: 95%; /* 宽度占95% */
|
||||
height: 10%; /* 高度 */
|
||||
|
||||
bottom: 1.2%; /* 距离底部2% */
|
||||
left: 2.5%; /* 左侧2.5% */
|
||||
background-color: khaki; /* 初始颜色 */
|
||||
border-radius: 37px; /* 圆角半径，可以根据需要调整 */
|
||||
z-index: -1; /* 使背景框在其他元素后面 */
|
||||
animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
|
||||
}
|
||||
|
||||
.home, .community, .assistant, .user {
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
height: 6%;
|
||||
bottom: 2%;
|
||||
transition: opacity 1s ease; /* 添加渐变过渡 */
|
||||
}
|
||||
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
|
||||
position: absolute;
|
||||
width: 17%;
|
||||
height: 10%;
|
||||
bottom: 2%;
|
||||
transition: opacity 1s ease; /* 添加渐变过渡 */
|
||||
}
|
||||
|
||||
/* 图标位置调整 */
|
||||
.home { left: 6%; }
|
||||
.pick_up_home { left: 6%; }
|
||||
.community { left: 30%; }
|
||||
.pick_up_community { left: 30%; }
|
||||
.assistant { left: 54%; }
|
||||
.pick_up_assistant { left: 54%; }
|
||||
.user { left: 78%; }
|
||||
.pick_up_user { left: 78%; }
|
||||
</style>
|
||||
@ -0,0 +1,148 @@
|
||||
<!-- TabBar.vue -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="bar_background"></view>
|
||||
<!-- Home 图标 -->
|
||||
<image class="home"
|
||||
src="/static/components/tarbar/pictures/home.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_home"
|
||||
src="/static/components/tarbar/pictures/home_picked_up.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Community 图标 -->
|
||||
<image class="community"
|
||||
src="/static/components/tarbar/pictures/community.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_community"
|
||||
src="/static/components/tarbar/pictures/community_pick_up.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Assistant 图标 -->
|
||||
<image class="pick_up_assistant"
|
||||
src="/static/components/tarbar/pictures/assistant_picked_up.png"
|
||||
@click="pick_up_assistant">
|
||||
</image>
|
||||
|
||||
<!-- User 图标 -->
|
||||
<image class="user"
|
||||
src="/static/components/tarbar/pictures/user.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_user"
|
||||
src="/static/components/tarbar/pictures/user_picked_up.png"
|
||||
@click="pick_up_user"
|
||||
:style="{ opacity: is_user_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
is_home_picked_up: false,
|
||||
is_communnity_picked_up: false,
|
||||
is_user_picked_up: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
pick_up_home() {
|
||||
this.resetPicks();
|
||||
this.is_home_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/home/home', // 使用 navigateTo
|
||||
});
|
||||
},
|
||||
pick_up_community() {
|
||||
this.resetPicks();
|
||||
this.is_communnity_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/community/community',
|
||||
});
|
||||
},
|
||||
pick_up_assistant() {
|
||||
this.resetPicks();
|
||||
this.is_assistant_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/puppy_chat/puppy_chat',
|
||||
});
|
||||
},
|
||||
pick_up_user() {
|
||||
this.resetPicks();
|
||||
this.is_user_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/user/user',
|
||||
});
|
||||
},
|
||||
resetPicks() {
|
||||
this.is_home_picked_up = false;
|
||||
this.is_communnity_picked_up = false;
|
||||
this.is_assistant_picked_up = false;
|
||||
this.is_user_picked_up = false;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
|
||||
@keyframes colorTransition {
|
||||
from {
|
||||
background-color: #5858cd;
|
||||
}
|
||||
to {
|
||||
background-color: #E9D0D0;
|
||||
}
|
||||
}
|
||||
.bar_background{
|
||||
position: absolute;
|
||||
width: 95%; /* 宽度占95% */
|
||||
height: 10%; /* 高度 */
|
||||
|
||||
bottom: 1.2%; /* 距离底部2% */
|
||||
left: 2.5%; /* 左侧2.5% */
|
||||
background-color: khaki; /* 初始颜色 */
|
||||
border-radius: 37px; /* 圆角半径，可以根据需要调整 */
|
||||
z-index: -1; /* 使背景框在其他元素后面 */
|
||||
animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
|
||||
}
|
||||
|
||||
.home, .community, .assistant, .user {
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
height: 6%;
|
||||
bottom: 2%;
|
||||
transition: opacity 1s ease; /* 添加渐变过渡 */
|
||||
}
|
||||
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
|
||||
position: absolute;
|
||||
width: 17%;
|
||||
height: 10%;
|
||||
bottom: 2%;
|
||||
transition: opacity 1s ease; /* 添加渐变过渡 */
|
||||
}
|
||||
|
||||
/* 图标位置调整 */
|
||||
.home { left: 6%; }
|
||||
.pick_up_home { left: 6%; }
|
||||
.community { left: 30%; }
|
||||
.pick_up_community { left: 30%; }
|
||||
.assistant { left: 54%; }
|
||||
.pick_up_assistant { left: 54%; }
|
||||
.user { left: 78%; }
|
||||
.pick_up_user { left: 78%; }
|
||||
</style>
|
||||
@ -0,0 +1,152 @@
|
||||
<!-- TabBar.vue -->
|
||||
<keep-alive>
|
||||
|
||||
</keep-alive>
|
||||
<template>
|
||||
<view>
|
||||
<view class="bar_background"></view>
|
||||
|
||||
<!-- Home 图标 -->
|
||||
<image class="home"
|
||||
src="/static/components/tarbar/pictures/home.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_home"
|
||||
src="/static/components/tarbar/pictures/home_picked_up.png"
|
||||
@click="pick_up_home"
|
||||
:style="{ opacity: is_home_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Community 图标 -->
|
||||
<image class="community"
|
||||
src="/static/components/tarbar/pictures/community.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_community"
|
||||
src="/static/components/tarbar/pictures/community_pick_up.png"
|
||||
@click="pick_up_community"
|
||||
:style="{ opacity: is_communnity_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- Assistant 图标 -->
|
||||
<image class="assistant"
|
||||
src="/static/components/tarbar/pictures/assistant.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 0 : 1 }">
|
||||
</image>
|
||||
<image class="pick_up_assistant"
|
||||
src="/static/components/tarbar/pictures/assistant_picked_up.png"
|
||||
@click="pick_up_assistant"
|
||||
:style="{ opacity: is_assistant_picked_up ? 1 : 0 }">
|
||||
</image>
|
||||
|
||||
<!-- User 图标 -->
|
||||
<image class="pick_up_user"
|
||||
src="/static/components/tarbar/pictures/user_picked_up.png"
|
||||
@click="pick_up_user">
|
||||
</image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
is_home_picked_up: false,
|
||||
is_communnity_picked_up: false,
|
||||
is_assistant_picked_up: false,
|
||||
is_user_picked_up: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
pick_up_home() {
|
||||
this.resetPicks();
|
||||
this.is_home_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/home/home', // 使用 navigateTo
|
||||
});
|
||||
},
|
||||
pick_up_community() {
|
||||
this.resetPicks();
|
||||
this.is_communnity_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/community/community',
|
||||
});
|
||||
},
|
||||
pick_up_assistant() {
|
||||
this.resetPicks();
|
||||
this.is_assistant_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/puppy_chat/puppy_chat',
|
||||
});
|
||||
},
|
||||
pick_up_user() {
|
||||
this.resetPicks();
|
||||
this.is_user_picked_up = true;
|
||||
uni.reLaunch({
|
||||
url: '/pages/homepages/user/user',
|
||||
});
|
||||
},
|
||||
resetPicks() {
|
||||
this.is_home_picked_up = false;
|
||||
this.is_communnity_picked_up = false;
|
||||
this.is_assistant_picked_up = false;
|
||||
this.is_user_picked_up = false;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
@keyframes colorTransition {
|
||||
from {
|
||||
background-color: #5858cd;
|
||||
}
|
||||
to {
|
||||
background-color: #E9D0D0;
|
||||
}
|
||||
}
|
||||
.bar_background{
|
||||
position: absolute;
|
||||
width: 95%; /* 宽度占95% */
|
||||
height: 10%; /* 高度 */
|
||||
|
||||
bottom: 1.2%; /* 距离底部2% */
|
||||
left: 2.5%; /* 左侧2.5% */
|
||||
background-color: khaki; /* 初始颜色 */
|
||||
border-radius: 37px; /* 圆角半径，可以根据需要调整 */
|
||||
z-index: -1; /* 使背景框在其他元素后面 */
|
||||
animation: colorTransition 2s ease forwards; /* 添加颜色渐变动画 */
|
||||
}
|
||||
|
||||
.home, .community, .assistant, .user {
|
||||
position: absolute;
|
||||
width: 15%;
|
||||
height: 6%;
|
||||
bottom: 2%;
|
||||
transition: opacity 2s ease; /* 添加渐变过渡 */
|
||||
}
|
||||
.pick_up_home, .pick_up_community, .pick_up_assistant, .pick_up_user {
|
||||
position: absolute;
|
||||
width: 17%;
|
||||
height: 10%;
|
||||
bottom: 2%;
|
||||
|
||||
}
|
||||
|
||||
/* 图标位置调整 */
|
||||
.home { left: 6%; }
|
||||
.pick_up_home { left: 6%; }
|
||||
.community { left: 30%; }
|
||||
.pick_up_community { left: 30%; }
|
||||
.assistant { left: 54%; }
|
||||
.pick_up_assistant { left: 54%; }
|
||||
.user { left: 78%; }
|
||||
.pick_up_user { left: 78%; }
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view>
|
||||
这是主页面
|
||||
<text>这个是home界面</text>
|
||||
<tarbar_home></tarbar_home>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<text>这个是User界面</text>
|
||||
<tarbar_user></tarbar_user>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view class="background">
|
||||
<!-- Swiper 轮播图 -->
|
||||
<swiper
|
||||
class="swiper-container"
|
||||
autoplay="3000"
|
||||
circular
|
||||
:current="current"
|
||||
@change="onSwiperChange"
|
||||
>
|
||||
<swiper-item v-for="(image, index) in images" :key="index">
|
||||
<image :src="image" class="swiper-image"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 动态切换的轮播点 -->
|
||||
<image :src="dotImages[current]" class="dot"></image>
|
||||
|
||||
<!-- 按钮效果 -->
|
||||
<image class="button" @click="click" src="/static/information/purpose/pictures/button.png"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
'/static/information/purpose/pictures/picture1.png',
|
||||
'/static/information/purpose/pictures/picture2.png',
|
||||
'/static/information/purpose/pictures/picture3.png',
|
||||
'/static/information/purpose/pictures/picture4.png',
|
||||
'/static/information/purpose/pictures/picture5.png',
|
||||
], // Swiper 轮播图片
|
||||
dotImages: [
|
||||
'/static/information/purpose/pictures/dot1.png',
|
||||
'/static/information/purpose/pictures/dot2.png',
|
||||
'/static/information/purpose/pictures/dot3.png',
|
||||
'/static/information/purpose/pictures/dot4.png',
|
||||
'/static/information/purpose/pictures/dot5.png',
|
||||
], // 轮播点图片
|
||||
current: 0, // 当前显示的图片索引
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/homepages/home/home', // 使用 navigateTo
|
||||
});
|
||||
},
|
||||
onSwiperChange(e) {
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.background {
|
||||
background-image: url("/static/information/purpose/pictures/background.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 80%; /* 根据需要调整轮播图高度 */
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
object-fit: cover; /* 保持图片比例 */
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: 22%;
|
||||
height: 3%;
|
||||
bottom: 15%;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 13%;
|
||||
bottom: 1%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 59 KiB |
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 211 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 295 KiB |
|
After Width: | Height: | Size: 366 KiB |
|
After Width: | Height: | Size: 351 KiB |
|
After Width: | Height: | Size: 453 KiB |
|
After Width: | Height: | Size: 368 KiB |
|
Before Width: | Height: | Size: 314 KiB After Width: | Height: | Size: 250 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 17 KiB |
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/transition.iml" filepath="$PROJECT_DIR$/.idea/transition.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
@ -1,6 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
@ -1,57 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="fe49509e-66b4-4a6b-ab2d-3ef0674550e6" name="更改" comment="">
|
||||
<change beforePath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/_metadata.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/_metadata.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../../unpackage/dist/cache/.vite/deps/package.json" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
|
||||
</component>
|
||||
<component name="ProjectId" id="2o1M2OtcNfb7BYpsadE3cgKuP5x" />
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"keyToString": {
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"WebServerToolWindowFactoryState": "false",
|
||||
"last_opened_file_path": "D:/webgl-examples/examples/front",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="应用程序级" UseSingleDictionary="true" transferred="true" />
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="默认任务">
|
||||
<changelist id="fe49509e-66b4-4a6b-ab2d-3ef0674550e6" name="更改" comment="" />
|
||||
<created>1730032420973</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1730032420973</updated>
|
||||
<workItem from="1730032422091" duration="31000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="Vcs.Log.Tabs.Properties">
|
||||
<option name="TAB_STATES">
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State />
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</component>
|
||||
</project>
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "48f6c93b",
|
||||
"configHash": "badd50c8",
|
||||
"hash": "3dcffc29",
|
||||
"configHash": "cc60d382",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "debd2ea0",
|
||||
"browserHash": "e601f541",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
Loading…
Reference in new issue