NetLogo-Mobile · sfls-huangzeyuan · Jan 19, 2025 · Jan 19, 2025
diff --git a/src/App.vue → src/APP.vue b/src/App.vue → src/APP.vue
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/BlockAndActivity.vue b/src/components/BlockAndActivity.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="container" :style="{ backgroundImage: `url(${ProjectsBackground})` }">
-      <h2 class="title">{{projectsName}}</h2>
+      <h2 class="title">{{ projectsName }}</h2>
       <div class="box">
         <Works v-for="item in projects" :key="item.ID" :data="item" :type="type"></Works>
       </div>

diff --git a/src/components/user/BasicInfoPopUp.vue b/src/components/user/BasicInfoPopUp.vue
@@ -0,0 +1,154 @@
+<script setup>
+import { ref } from "vue";
+
+defineProps({
+  username: String,
+  user_tag: String,
+});
+
+const ShowBasicInfo = ref(false);
+</script>
+
+<template>
+  <div class="btns">
+    <button
+      type="button"
+      id="BasicInfoPopUp"
+      @click="ShowBasicInfo = true"
+      style="background-color: #00a9ff; color: white; left: 5%; width: 42.5%; top: 45%"
+    >
+      基本信息
+    </button>
+    <button
+      type="button"
+      id="BasicInfoPopUp"
+      @click="ShowBasicInfo = true"
+      style="background-color: white; color: black; left: 5%; width: 42.5%; top: 45%"
+    >
+      安全中心
+    </button>
+  </div>
+  <transition name="fade">
+    <div v-if="ShowBasicInfo" id="BasicInfoPopUpMenu" style="top: 100px; left: 50px">
+      <ul id="BasicInfo">
+        <li id="BasicInfoUsername">
+          <p
+            style="
+              color: black;
+              width: auto;
+              height: auto;
+              position: relative;
+              top: 15%;
+              left: 7.5%;
+              font-size: 12px;
+            "
+          >
+            <strong>{{ username }}</strong>
+          </p>
+        </li>
+        <li id="BasicInfoUserTag">
+          <p
+            style="
+              color: lightgray;
+              width: auto;
+              height: auto;
+              position: relative;
+              top: 20%;
+              left: 7.5%;
+              font-size: 10px;
+            "
+          >
+            {{ user_tag }}
+          </p>
+        </li>
+      </ul>
+      <div id="BasicInfoWrap" @click="ShowBasicInfo = false" style="display: none">%20</div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+#BasicInfo {
+  list-style-type: none;
+  display: flex;
+  top: 20%;
+  left: 15%;
+  bottom: 20%;
+  right: 15%;
+  width: 70%;
+  height: 60%;
+  z-index: 100;
+}
+#BasicInfoWrap {
+  display: none;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  background-color: #f0f0f050;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  z-index: 50;
+}
+#BasicInfoPopUp {
+  display: none;
+  border: none;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  margin-top: auto;
+}
+#BasicInfoPopUpMenu {
+  display: none;
+  background-color: lightgray;
+  border-radius: 5%;
+  border: none;
+  text-align: center;
+  text-decoration: none;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  top: 25%;
+  left: 15%;
+  bottom: 25%;
+  right: 15%;
+  width: 70%;
+  height: 50%;
+}
+#SecurityCenterPopUp {
+  border: none;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  top: 100px;
+  left: 50px;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+.btns {
+  margin-top: auto;
+  display: flex;
+  justify-content:space-around;
+}
+</style>
diff --git a/src/components/user/CommunitySelectingContainer.vue b/src/components/user/CommunitySelectingContainer.vue
@@ -0,0 +1,46 @@
+<script setup>
+defineProps({
+  username: String,
+  user_id: String,
+  user_tag: String,
+  count_following: Number,
+  count_follower: Number,
+  count_projects: Number,
+  count_messages: Number,
+});
+</script>
+
+<template>
+  <div id="CommunityInfoSelectBar">
+    <div id="BarContainer">
+      <div class="SelectBar" @click="handleProjectsClick">作品({{ count_projects }})</div>
+      <div class="SelectBar" @click="handleMessagesClick">留言({{ count_messages }})</div>
+      <div class="SelectBar" @click="handleFollowerFollowingClick">粉丝({{ count_follower }})</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#BarContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.SelectBar {
+  margin: 0 10px;
+  padding: 10px;
+}
+
+.SelectBar {
+  font-weight: 500;
+  font-family: inherit;
+  transition: border-color 0s;
+  font-size: 1em;
+  color: aliceblue;
+}
+
+.SelectBar:hover {
+  color: black;
+}
+</style>
diff --git a/src/components/user/PersonalInfo.vue b/src/components/user/PersonalInfo.vue
@@ -0,0 +1,123 @@
+<script setup>
+defineProps({
+  username: String,
+  user_id: String,
+  user_tag: String,
+  count_following: Number,
+  count_follower: Number,
+  count_projects: Number,
+  count_messages: Number,
+});
+</script>
+
+<template>
+  <div id="go_back">
+    <div class="btn">
+      <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <ellipse
+            ry="25"
+            rx="25"
+            id="svg_5"
+            cy="24.94019"
+            cx="25"
+            stroke-width="2"
+            fill="#BBBBBB"
+          />
+          <ellipse
+            ry="0.2038"
+            rx="0.2038"
+            id="svg_6"
+            cy="20.61135"
+            cx="41.10052"
+            stroke-width="2"
+            fill="#666666"
+          />
+          <line
+            stroke-width="3"
+            id="svg_2"
+            y2="15"
+            x2="30"
+            y1="25"
+            x1="20"
+            stroke="#ffffff"
+            fill="none"
+          />
+          <line
+            transform="rotate(90 24.9321 30)"
+            stroke-width="3"
+            id="svg_3"
+            y2="25"
+            x2="30"
+            y1="35"
+            x1="19.86413"
+            stroke="#ffffff"
+            fill="none"
+          />
+          <path
+            transform="rotate(45 19.9084 24.9825)"
+            id="svg_8"
+            d="m19.4084,24.5449l1,0l0,0.87515l-1,0l0,-0.87515z"
+            stroke-width="2"
+            stroke="#ffffff"
+            fill="none"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+
+  <div class="user_name">
+    <div>{{ username }}</div>
+  </div>
+
+  <div class="title_bar">
+    <div id="title_bar_user_tag">{{ user_tag }}</div>
+    <div id="title_bar_following">Following {{ count_following }}</div>
+    <div id="title_bar_follower">Follower {{ count_follower }}</div>
+  </div>
+</template>
+
+<style scoped>
+#go_back {
+  display: flex;
+}
+
+.title_bar {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.user_name {
+  display: flex;
+  height: 20px;
+}
+
+.user_name div {
+  font-family: YouYuan;
+  margin-left: 20px;
+  font-size: 30px;
+  font-weight: bold;
+  color: aliceblue;
+}
+
+.title_bar {
+  display: flex;
+  padding-left: 20px;
+}
+
+#title_bar_user_tag,
+#title_bar_following,
+#title_bar_follower {
+  background-color: rgba(70, 70, 70, 0.3);
+  padding: 3px;
+  border-radius: 5px;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+#title_bar_user_tag {
+  color: aquamarine;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,5 @@
 import { createApp } from "vue";
-import App from "./App.vue";
+import App from "./APP.vue";
 import router from "./router";
 
 createApp(App).use(router).mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home.vue";
 import BlackHole from "../views/BlackHole.vue";
+import UserProfile from "../views/UserProfile.vue";
 
 const routes = [
   {
@@ -13,6 +14,11 @@ const routes = [
     name: "BlackHole",
     component: BlackHole,
   },
+  {
+    path: "/profile",
+    name: "profile",
+    component: UserProfile,
+  },
 ];
 
 const router = createRouter({