添加页面

src/pages.json

@@ -3,6 +3,15 @@
     {
       "path": "pages/index"
     },
+    {
+      "path": "pages/about-us"
+    },
+    {
+      "path": "pages/webview",
+      "style": {
+        "navigationBarTitleText": "网页浏览"
+      }
+    },
     {
       "path": "pages/battle-result"
     },

src/pages/about-us.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import Container from "@/components/Container.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const isIos = ref(false);
+
+const openLink = () => {
+  uni.navigateTo({
+    url:
+      "/pages/webview?url=" +
+      encodeURIComponent("https://www.beian.miit.gov.cn/"),
+  });
+};
+onMounted(() => {
+  const deviceInfo = uni.getDeviceInfo();
+  isIos.value = deviceInfo.osName === "ios";
+});
+</script>
+
+<template>
+  <Container title="关于我们">
+    <view class="container">
+      <view class="text">
+        《射灵星球》是以智能和物联网技术驱动的全球射箭专业选手及射箭爱好者互动交流平台，由广州光点飞舞网络有限公司研发并提供线上服务。
+      </view>
+
+      <view class="text">
+        我们专注于智能射箭技术的探索和应用，通过物联网技术、激光系统、人工智能、嵌入式AI及射箭在线互娱模式的创新与研发，提供专业的智能体育设备和有趣的在线物联游戏，以此推动射箭运动及更多专业体育运动走入大众家庭。
+      </view>
+
+      <view
+        class="copyright"
+        :style="{ paddingBottom: isIos ? '30rpx' : '20rpx' }"
+        @click="openLink"
+      >
+        <text>粤ICP备2025421150号-2X</text>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: calc(100% - 50rpx);
+  height: 100%;
+  padding: 25rpx;
+  background-color: #ffffff;
+  position: relative;
+}
+
+.intro-text {
+  font-size: 14px;
+  color: #333333;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 10px;
+}
+
+.text {
+  font-size: 14px;
+  color: #666666;
+  line-height: 1.6;
+  margin-bottom: 10px;
+  text-align: justify;
+}
+
+.copyright {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 50rpx);
+  align-items: center;
+  font-size: 24rpx;
+  color: #afafaf;
+}
+</style>

src/pages/user.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import UserItem from "@/components/UserItem.vue";
@@ -46,11 +47,23 @@ const toRankIntroPage = () => {
     url: "/pages/rank-intro",
   });
 };
+const toAboutUsPage = () => {
+  uni.navigateTo({
+    url: "/pages/about-us",
+  });
+};
+
+const showLogout = ref(false);
 const logout = () => {
   uni.removeStorageSync("token");
   uni.navigateBack();
   updateUser();
 };
+onMounted(() => {
+  const accountInfo = uni.getAccountInfoSync();
+  const envVersion = accountInfo.miniProgram.envVersion;
+  if (envVersion !== "release") showLogout.value = true;
+});
 </script>
 
 <template>
@@ -110,7 +123,12 @@ const logout = () => {
         <view class="my-grow" @click="toMyGrowthPage">
           <image src="../static/my-grow.png" mode="widthFix" />
         </view>
-        <UserItem title="退出登录(仅用于测试)" :onClick="logout" />
+        <UserItem title="关于我们" :onClick="toAboutUsPage" />
+        <UserItem
+          title="退出登录(仅用于测试)"
+          :onClick="logout"
+          v-if="showLogout"
+        />
       </view>
     </view>
   </Container>

src/pages/webview.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+
+const url = ref("");
+onLoad((options) => {
+  url.value = decodeURIComponent(options.url);
+  console.log(url.value);
+});
+</script>
+
+<template>
+  <web-view :src="url"></web-view>
+</template>
+
+<style scoped></style>

src/theme.json

@@ -2,9 +2,9 @@
   "light": {
     "bgColor": "#fcfcfc",
     "bgColorBottom": "#fcfcfc",
-    "bgColorTop": "#ff6b00",
+    "bgColorTop": "#fcfcfc",
     "bgTxtStyle": "dark",
-    "navBgColor": "#ff6b00",
+    "navBgColor": "#fcfcfc",
     "navTxtStyle": "white",
     "tabBgColor": "#fcfcfc",
     "tabBorderStyle": "black",
@@ -14,9 +14,9 @@
   "dark": {
     "bgColor": "#181818",
     "bgColorBottom": "#181818",
-    "bgColorTop": "#ff6b00",
+    "bgColorTop": "#181818",
     "bgTxtStyle": "light",
-    "navBgColor": "#ff6b00",
+    "navBgColor": "#181818",
     "navTxtStyle": "white",
     "tabBgColor": "#181818",
     "tabBorderStyle": "white",