xuhanchi/bht-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的页面静态还原

Browse Source
This commit is contained in:
xhc 2025-05-23 14:57:57 +08:00
parent ced539d899
commit 777ed7b483
15 changed files with 267 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -2,7 +2,7 @@
* @Author: XHC
* @Date: 2025-05-19 10:21:48
* @LastEditors: XHC
* @LastEditTime: 2025-05-22 14:51:18
* @LastEditTime: 2025-05-23 14:26:43
* @Description:
-->
<script>
@ -33,6 +33,10 @@ uni-page-body {
.head {
font-weight: 700;
font-size: 29rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx 0;
.title {
display: inline-block;
height: 25rpx;

4
src/pages.json
View File

@ -28,7 +28,9 @@
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的"
"navigationBarTitleText": "我的",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#1469BC"
}
}
],

18
src/pages/index/index.vue
View File

@ -2,7 +2,7 @@
* @Author: XHC
* @Date: 2025-05-19 11:07:37
* @LastEditors: XHC
* @LastEditTime: 2025-05-22 14:34:42
* @LastEditTime: 2025-05-23 14:55:21
* @Description: 首页
-->
<template>
@ -80,17 +80,13 @@
</view>
<view v-if="categoryCurIndex == 0">
<uni-card class="list-card" v-for="(item, index) in listData" :key="index">
<uni-row class="head">
<uni-col :span="20">
<text class="title">{{ item.title }}</text>
</uni-col>
<uni-col :span="4">
<uni-tag :inverted="true" :text="item.state" :type="item.state == '未巡检' ? 'error' : item.state == '巡检中' ? 'warning' : 'success'" />
</uni-col>
</uni-row>
<view class="head">
<text class="title">{{ item.title }}</text>
<uni-tag :inverted="true" :text="item.state" :type="item.state == '未巡检' ? 'error' : item.state == '巡检中' ? 'warning' : 'success'" />
</view>
<view class="num grey">线路编号：{{ item.num }}</view>
<view class="info-box grey">
<text class="info"> <uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.info }}</text>
<view class="info"> <uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.info }}</view>
<text class="info">任务 {{ item.task }}</text>
</view>
</uni-card>
@ -107,7 +103,7 @@
</template>
<script setup>
import { reactive } from "vue";
import { reactive, ref } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import Dashboard from "@/components/echarts/dashboard.vue";

8
src/pages/knowledgeBase/knowledgeBase.vue
View File

@ -2,7 +2,7 @@
* @Author: XHC
* @Date: 2025-05-19 15:18:26
* @LastEditors: XHC
* @LastEditTime: 2025-05-22 15:49:57
* @LastEditTime: 2025-05-23 09:52:40
* @Description:
-->
<template>
@ -29,10 +29,10 @@
<view class="info-box grey">
<uni-row :gutter="30">
<uni-col :span="16">
<text class="info"><uni-icons fontFamily="iconfont" color="#1469BC">{{'&#xe753;'}}</uni-icons> <text>{{ item.departments }}</text></text>
<view class="info"><uni-icons fontFamily="iconfont" color="#1469BC">{{'&#xe753;'}}</uni-icons> <text>{{ item.departments }}</text></view>
</uni-col>
<uni-col :span="8">
<text class="info"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</text>
<view class="info"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</view>
</uni-col>
</uni-row>
</view>
@ -42,7 +42,7 @@
</template>
<script setup>
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
// 标题

2
src/pages/message/message.vue
View File

@ -15,7 +15,7 @@
</view>
<view class="info">{{ item.info }}</view>
<view class="bottom">
<text class="time"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</text>
<view class="time"><uni-icons fontFamily="iconfont" color="#808185">{{'&#xe74e;'}}</uni-icons> {{ item.time }}</view>
<view class="detail"><text>查看详情</text> <uni-icons type="right" color="#0F64B9" size="20" /></view>
</view>
</view>

106
src/pages/my/my.vue
View File

@ -1,8 +1,110 @@
<template>
<view class="my">my</view>
<view class="my">
<view class="avatar-box">
<uni-file-picker class="avatar" return-type="object" :value="file" :del-icon="false" disable-preview :imageStyles="imageStyles"
file-mediatype="image">选择</uni-file-picker>
<text class="name">用户名</text>
</view>
<view class="info">
<view class="info-item" v-for="(item, index) in infoData" :key="index">
<text class="title">{{ item.title }}</text>：
<text>{{ item.value }}</text>
</view>
</view>
<view class="list">
<uni-card class="list-item" v-for="(item, index) in listData" :key="index">
<uni-row :gutter="30">
<uni-col :span="2">
<uni-icons fontFamily="iconfont" color="#1469BD" size="20">{{item.icon}}</uni-icons>
</uni-col>
<uni-col :span="20">
<text class="title">{{ item.title }}</text>
</uni-col>
<uni-col :span="2">
<uni-icons type="right" color="#1469BD" size="20"></uni-icons>
</uni-col>
</uni-row>
</uni-card>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
let imageStyles = reactive({
width:86,
height:86,
border: {
color:"#0C5DAE",
radius: '50%',
width: 2,
}
})
let file = reactive({
name:"avatar.png",
extname:"png",
url:"/static/index/logo.png",
})
// 个人信息
let infoData = reactive([
{ title: '工号', value: '101200022' },
{ title: '电话号码', value: '15979318624' },
{ title: '岗位', value: '巡检员' },
{ title: '部门', value: '运行部' },
])
let listData = reactive([
{ icon: '\ue637', title: '巡检统计' },
{ icon: '\ue656', title: '系统反馈' },
{ icon: '\ue610', title: '紧急联系' },
{ icon: '\ue650', title: '关于' },
])
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.my {
background: url("@/static/image/my/bg.png") no-repeat;
background-size: 100% auto;
.avatar-box {
display: flex;
flex-direction: column;
align-items: center;
.avatar {
width: auto;
}
.name {
color: #045BB7;
}
}
.info {
margin: -100rpx 30rpx 0;
padding-top: 130rpx;
background: url("@/static/image/my/info-bg.png") no-repeat;
background-size: 100% 100%;
.info-item {
margin: 0 50rpx;
padding: 30rpx 10rpx;
border-top: 1rpx solid #fff;
}
.title{
width: 130rpx;
display: inline-block;
color: #828186;
text-align-last: justify;
}
}
.list {
.list-item {
padding: 15rpx!important;
}
.title {
font-size: 34rpx;
color: #000;
}
}
}
</style>

98
src/static/icon/demo_index.html
View File

@ -54,6 +54,30 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">紧急联系人</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">巡检统计</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe656;</span>
<div class="name">反馈系统反馈管理</div>
<div class="code-name">&amp;#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe650;</span>
<div class="name">信息-方-F</div>
<div class="code-name">&amp;#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">筛选</div>
@ -150,9 +174,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1747894097939') format('woff2'),
url('iconfont.woff?t=1747894097939') format('woff'),
url('iconfont.ttf?t=1747894097939') format('truetype');
src: url('iconfont.woff2?t=1747971580274') format('woff2'),
url('iconfont.woff?t=1747971580274') format('woff'),
url('iconfont.ttf?t=1747971580274') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -178,6 +202,42 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-jinjilianxiren"></span>
<div class="name">
紧急联系人
</div>
<div class="code-name">.icon-jinjilianxiren
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home_function_xunjiantongji"></span>
<div class="name">
巡检统计
</div>
<div class="code-name">.icon-home_function_xunjiantongji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fankuixitongfankuiguanli"></span>
<div class="name">
反馈系统反馈管理
</div>
<div class="code-name">.icon-fankuixitongfankuiguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinxi-fang-F"></span>
<div class="name">
信息-方-F
</div>
<div class="code-name">.icon-xinxi-fang-F
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-filter-fill"></span>
<div class="name">
@ -322,6 +382,38 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jinjilianxiren"></use>
</svg>
<div class="name">紧急联系人</div>
<div class="code-name">#icon-jinjilianxiren</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home_function_xunjiantongji"></use>
</svg>
<div class="name">巡检统计</div>
<div class="code-name">#icon-home_function_xunjiantongji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fankuixitongfankuiguanli"></use>
</svg>
<div class="name">反馈系统反馈管理</div>
<div class="code-name">#icon-fankuixitongfankuiguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xinxi-fang-F"></use>
</svg>
<div class="name">信息-方-F</div>
<div class="code-name">#icon-xinxi-fang-F</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-filter-fill"></use>

22
src/static/icon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4926721 */
src: url('iconfont.woff2?t=1747894097939') format('woff2'),
url('iconfont.woff?t=1747894097939') format('woff'),
url('iconfont.ttf?t=1747894097939') format('truetype');
src: url('iconfont.woff2?t=1747971580274') format('woff2'),
url('iconfont.woff?t=1747971580274') format('woff'),
url('iconfont.ttf?t=1747971580274') format('truetype');
}
.iconfont {
@ -13,6 +13,22 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-jinjilianxiren:before {
content: "\e610";
}
.icon-home_function_xunjiantongji:before {
content: "\e637";
}
.icon-fankuixitongfankuiguanli:before {
content: "\e656";
}
.icon-xinxi-fang-F:before {
content: "\e650";
}
.icon-filter-fill:before {
content: "\e621";
}

2
src/static/icon/iconfont.js
View File

File diff suppressed because one or more lines are too long

28
src/static/icon/iconfont.json
View File

@ -5,6 +5,34 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "3182358",
"name": "紧急联系人",
"font_class": "jinjilianxiren",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "9549129",
"name": "巡检统计",
"font_class": "home_function_xunjiantongji",
"unicode": "e637",
"unicode_decimal": 58935
},
{
"icon_id": "21715935",
"name": "反馈系统反馈管理",
"font_class": "fankuixitongfankuiguanli",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "38304560",
"name": "信息-方-F",
"font_class": "xinxi-fang-F",
"unicode": "e650",
"unicode_decimal": 58960
},
{
"icon_id": "9512562",
"name": "筛选",

BIN
src/static/icon/iconfont.ttf
View File

Binary file not shown.

BIN
src/static/icon/iconfont.woff
View File

Binary file not shown.

BIN
src/static/icon/iconfont.woff2
View File

Binary file not shown.

BIN
src/static/image/my/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 471 KiB

BIN
src/static/image/my/info-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB