pwlfzbeg4
/
digital_culture_heritage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

原型修改

Browse Source
main
HZXhuang 2 years ago
parent 500ae89237
commit 22ec78c5f3
12 changed files with 1232 additions and 0 deletions
Show Stats Download Patch File Download Diff File

250
code/frontend/src/components/user/HeaderBar2.vue
Unescape View File

@ -0,0 +1,250 @@
<template>
<div>
<div id="header-title">
中国语言文化作品国际传播效果分析系统
</div>
<div id="show-login-div">
<div id="user-info" v-if="loginFlag"> <!--显示登录用户-->
<el-avatar :size="45" icon="el-icon-user-solid" :src="avatar" id="inner-user-avatar"></el-avatar>
<div id="inner-user-nick">{{ nickname }}</div>
</div>
<div v-else> <!--未登录可前往登录-->
<router-link to="/login" style="color: #6dcdcd; font-weight: bold">前往登录>></router-link>
</div>
</div>
<div id="nav-tab" ref="navtab">
<div class="nav-tab-item active" v-for="(item,index) in items"
:key="index"
@click="switchMenu(index)"
:style="{'width': `${activeIndex === index ? itemWidth + 10: itemWidth}%`}">
<router-link :to="item.path" style="text-align: center; width: 100%;height: 100%;padding-top: 12px">
<i :class='item.icon'></i>
<p class="nav-tab-item_label" style="margin-top: 4px">{{item.label}}</p>
</router-link>
</div>
<div class="nav-tab-overlay" :style="{'left':`${activeIndex * itemWidth}%`,'width':`${itemWidth + 10}%`}"></div>
</div>
</div>
</template>
<script>
import {hasLogin} from "../../utils/auth";
export default {
name: "HeaderBar2",
props: {
/*activeIndex: {
type: Number,
require: true
},
loginFlag: {
type: Boolean,
require: true
}*/
},
data() {
return {
items: [
{ icon: 'nav-tab-item_icon iconfont icon-home', label: '首页', path: '/home'},
{ icon: 'nav-tab-item_icon iconfont icon-send-fill', label: '传播效果评估', path: '/effect'},
{ icon: 'nav-tab-item_icon iconfont icon-shujuxianshi', label: '大屏模式', path: '/big-screen'},
{ icon: 'nav-tab-item_icon iconfont icon-zhinengtuijian', label: '作品推荐', path: '/recommend'},
{ icon: 'nav-tab-item_icon iconfont icon-project_info', label: '背景介绍', path: '/background'},
{ icon: 'nav-tab-item_icon iconfont icon-rencaishuangxuanhui', label: '团队介绍', path: '/team'},
{ icon: 'nav-tab-item_icon iconfont icon-a-commandinquiry-fill', label: '常见问题', path: '/question'},
{ icon: 'nav-tab-item_icon iconfont icon-user', label: '个人中心', path: '/personal'},
],
// activeIndex: Number(sessionStorage.getItem("activeIndex")),
routes_map: {
"/home": 0,
"/effect": 1,
"/recommend": 3,
"/background": 4,
"/team": 5,
"/question": 6,
"/personal": 7,
"/not-login": 7,
"/sentiment-assessment":1
},
activeIndex: 0,
loginFlag: true,
}
},
methods: {
switchMenu(index) {
this.activeIndex = index
// sessionStorage.setItem("activeIndex", index)
},
judgeLogin(){ //判断用户是否登录
this.loginFlag = hasLogin()
},
},
computed: {
itemWidth() {
return 90 / this.items.length;
},
avatar() {
return this.$store.getters.avatar
},
nickname() {
return this.$store.getters.nickname
}
},
created() {
this.judgeLogin()
this.activeIndex = this.routes_map[this.$route.path]
},
mounted() {
// alert(this.$store.state.user)
// alert("hello")
/*let menuId = sessionStorage.getItem("activeIndex")
alert(menuId)
if (!menuId) menuId = 0
if (menuId) {
this.activeIndex = Number(menuId)
}*/
},
watch: {
// 监听路由的变化
$route(to, from) {
// console.log("路由变化了")
// console.log("当前页面路由：", to);
// console.log("上一个路由:", from)
this.judgeLogin()
this.activeIndex = this.routes_map[to.path]
}
}
}
</script>
<style scoped>
/* 配色方案:
背景:7dbfff,
图标&标签:4298e7,
遮罩:e4f2ff */
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: #7dbfff;
/* 居中 */
display: flex;
justify-content: center;
align-items: center;
}
#nav-tab {
position: relative;
width: 100%;
height: 80px;
background-color: #195161;
display: flex;
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
overflow: hidden;
}
.nav-tab-item {
height: 100%;
z-index: 2;
transition: 0.3s;
cursor: pointer;
/* 居中 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.nav-tab-item.active {
width: 210px;
}
.nav-tab-item:hover {
background-color: #2b729c;
border-radius: 20px;
}
.nav-tab-item_icon {
font-size: 26px;
color: #ffffff;
transition: 0.3s;
transform: translate(0, 0px);
}
.active .nav-tab-item_icon {
transform: translate(0, -10px);
}
.nav-tab-item_label {
font-size: 18px;
color: #ffffff;
opacity: 0;
transition: 0.3s;
user-select: none;
}
.active .nav-tab-item_label {
opacity: 1;
}
.nav-tab-overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 210px;
background-color: #2b729c;
border-radius: 20px;
transition: 0.3s;
}
#header-title {
height: 80px;
background-color: #195161;
color: white;
font-size: 30px;
text-align: center;
padding-top: 20px;
font-family: Arial, sans-serif;
text-shadow: 1px 1px white;
}
#show-login-div{
height: 100px;
width: 220px;
background-color: #195161;
position: absolute;
top: 25px;
right: 40px;
}
/*#inner-user-avatar{
height: 50px;
width: 50px;
float: left;
}*/
#inner-user-nick{
height: 20px;
width: 155px;
font-family: 华光中圆_CNKI;
margin-top: 15px;
margin-left: 10px;
font-size: 18px;
color: #E6A23C;
float: right;
}
</style>

445
code/frontend/src/components/user/MyFooter.vue
Unescape View File

@ -0,0 +1,445 @@
<template>
<div class="body">
<!-- partial:index.partial.html -->
<!-- <div class="main"></div>-->
<div class="footer">
<div class="bubbles">
<div class="bubble" style="--size:2.5129399643529515rem; --distance:9.569389395239572rem; --position:90.34137378453543%; --time:3.158603591725461s; --delay:-3.951399490618868s;"></div>
<div class="bubble" style="--size:5.754451568723765rem; --distance:6.922683333065855rem; --position:60.48703857917839%; --time:3.090768852230255s; --delay:-2.21664977842936s;"></div>
<div class="bubble" style="--size:5.577960708822295rem; --distance:6.033530707261963rem; --position:97.16689762780095%; --time:3.161839123200946s; --delay:-3.5031399066386517s;"></div>
<div class="bubble" style="--size:5.73473822293541rem; --distance:9.831547190166653rem; --position:69.55600964466468%; --time:2.2963196014422396s; --delay:-3.0166502094909577s;"></div>
<div class="bubble" style="--size:3.2760848820278383rem; --distance:8.653891314431942rem; --position:74.93318182890084%; --time:3.102039961902087s; --delay:-2.4629132862091296s;"></div>
<div class="bubble" style="--size:4.451119025357069rem; --distance:9.307929255379896rem; --position:-1.9506155097128741%; --time:2.118673290697609s; --delay:-2.9198521353167988s;"></div>
<div class="bubble" style="--size:5.165608257204196rem; --distance:8.839687367157527rem; --position:101.78697565544917%; --time:3.380221603045161s; --delay:-3.1466755521569705s;"></div>
<div class="bubble" style="--size:4.873345653596926rem; --distance:8.688128726855018rem; --position:19.914336758241966%; --time:2.3878482918536137s; --delay:-3.9587955352882713s;"></div>
<div class="bubble" style="--size:2.392950926403123rem; --distance:8.501586086162916rem; --position:99.92438591865006%; --time:2.9453573647502425s; --delay:-2.573062841239047s;"></div>
<div class="bubble" style="--size:3.0603964096441993rem; --distance:7.565304008620924rem; --position:35.62051560814785%; --time:2.6685219846812585s; --delay:-2.002429495875953s;"></div>
<div class="bubble" style="--size:3.2395535009658847rem; --distance:7.775533316141882rem; --position:84.07861874900438%; --time:3.056647116017596s; --delay:-2.1146312417814275s;"></div>
<div class="bubble" style="--size:5.9907443346752665rem; --distance:7.443949546066218rem; --position:72.96811457217618%; --time:3.591163667564211s; --delay:-3.5881454251388383s;"></div>
<div class="bubble" style="--size:3.565181919904081rem; --distance:6.283916825954732rem; --position:13.38631217280636%; --time:3.45911648488566s; --delay:-3.0881781832114705s;"></div>
<div class="bubble" style="--size:2.393288688083109rem; --distance:8.634517302688867rem; --position:11.80219468344686%; --time:3.0895001934455677s; --delay:-2.501984577799233s;"></div>
<div class="bubble" style="--size:5.1707196270057905rem; --distance:7.036837952152301rem; --position:16.879755267921382%; --time:2.2544306070815887s; --delay:-3.8123233220562303s;"></div>
<div class="bubble" style="--size:4.374543816928007rem; --distance:9.134987698177842rem; --position:54.45126551687996%; --time:2.9577100802499663s; --delay:-3.204449276348348s;"></div>
<div class="bubble" style="--size:2.556194192071568rem; --distance:9.06249975096152rem; --position:59.81598151014023%; --time:2.85096579212235s; --delay:-2.5843371609214354s;"></div>
<div class="bubble" style="--size:4.704695960960265rem; --distance:8.708535810080523rem; --position:67.95514498304095%; --time:2.3707459381745357s; --delay:-3.310383112195752s;"></div>
<div class="bubble" style="--size:2.3066700015772144rem; --distance:8.651822622268504rem; --position:30.3183495700574%; --time:2.7999078313821s; --delay:-2.7796054702316786s;"></div>
<div class="bubble" style="--size:5.191842932125632rem; --distance:9.07537909479601rem; --position:5.351053129985816%; --time:3.9523268091736106s; --delay:-2.5207468600293326s;"></div>
<div class="bubble" style="--size:4.079974290653716rem; --distance:6.04939926520914rem; --position:29.965778894246696%; --time:2.68724751985134s; --delay:-2.9077018373930343s;"></div>
<div class="bubble" style="--size:5.501994974857285rem; --distance:6.617321348845684rem; --position:2.737139677716285%; --time:2.221745291614416s; --delay:-3.2764972867727176s;"></div>
<div class="bubble" style="--size:3.96809137416901rem; --distance:6.37691248684348rem; --position:68.53240833956087%; --time:2.2905830350340826s; --delay:-3.0521404824552807s;"></div>
<div class="bubble" style="--size:4.8575392169651925rem; --distance:7.356472206513415rem; --position:82.25962263754028%; --time:3.4035788014733166s; --delay:-3.7875381973207602s;"></div>
<div class="bubble" style="--size:4.437800309407677rem; --distance:6.532955815674778rem; --position:63.63615446734131%; --time:2.491867902987096s; --delay:-2.527797433340853s;"></div>
<div class="bubble" style="--size:5.230943060921192rem; --distance:8.76702449745222rem; --position:55.813851662034615%; --time:3.384879244325974s; --delay:-3.750173297484301s;"></div>
<div class="bubble" style="--size:4.156816414204386rem; --distance:8.177567901683542rem; --position:0.606420672454222%; --time:3.0048565927939843s; --delay:-2.336042082461911s;"></div>
<div class="bubble" style="--size:2.3402093618197446rem; --distance:8.294189296818786rem; --position:14.372951155588488%; --time:2.556432002211353s; --delay:-2.427019682274549s;"></div>
<div class="bubble" style="--size:5.131482470749261rem; --distance:6.607592508430263rem; --position:70.67340500827576%; --time:2.1858006727053314s; --delay:-3.403574247366215s;"></div>
<div class="bubble" style="--size:3.0812434578785695rem; --distance:7.095638603945639rem; --position:55.93039767659408%; --time:3.4648808094884105s; --delay:-2.287095325953925s;"></div>
<div class="bubble" style="--size:2.831242401253803rem; --distance:9.20501034813384rem; --position:71.62946128904592%; --time:3.3232199755435805s; --delay:-2.7660866910813464s;"></div>
<div class="bubble" style="--size:5.277049591613344rem; --distance:8.632083467676043rem; --position:94.3926749417734%; --time:3.628023057504828s; --delay:-3.7852627818363094s;"></div>
<div class="bubble" style="--size:3.2963401788680384rem; --distance:9.708009889611814rem; --position:89.0374187959427%; --time:2.9095974600801786s; --delay:-2.5963463512061478s;"></div>
<div class="bubble" style="--size:5.650610360514489rem; --distance:8.045614315411537rem; --position:91.74453848386763%; --time:2.653332755368451s; --delay:-3.2286646810914656s;"></div>
<div class="bubble" style="--size:3.4607375033107326rem; --distance:8.216725494530234rem; --position:49.0996556821719%; --time:3.11337339759574s; --delay:-3.4305470627468924s;"></div>
<div class="bubble" style="--size:5.516414092066928rem; --distance:7.898478596589493rem; --position:99.16047524584323%; --time:2.651448451487041s; --delay:-3.322363622752702s;"></div>
<div class="bubble" style="--size:2.89187181593704rem; --distance:8.17874722770317rem; --position:19.282504282695964%; --time:2.9511396384810276s; --delay:-2.1967850551500687s;"></div>
<div class="bubble" style="--size:4.257595511058312rem; --distance:6.48498467779089rem; --position:84.86354357438256%; --time:2.26394174982257s; --delay:-3.092983837288044s;"></div>
<div class="bubble" style="--size:4.628516100633378rem; --distance:7.5031348434108285rem; --position:104.46542424488948%; --time:2.6530603891221003s; --delay:-2.0146514593751315s;"></div>
<div class="bubble" style="--size:3.415659444271168rem; --distance:6.315655855997945rem; --position:98.62300304018311%; --time:2.194590566633034s; --delay:-3.882489466304752s;"></div>
<div class="bubble" style="--size:4.649292591168304rem; --distance:6.624449965643886rem; --position:25.149089822388312%; --time:3.2462122425182884s; --delay:-2.381027915909034s;"></div>
<div class="bubble" style="--size:4.165345739247351rem; --distance:8.534675643611951rem; --position:16.38574015102876%; --time:3.95011887920616s; --delay:-2.7069875170953965s;"></div>
<div class="bubble" style="--size:2.9049656876107726rem; --distance:6.544693591597687rem; --position:73.2516389378364%; --time:3.200274956770777s; --delay:-3.900634733005333s;"></div>
<div class="bubble" style="--size:2.149624532948228rem; --distance:8.632975731673374rem; --position:31.054436493218446%; --time:2.8647586310768784s; --delay:-3.680313328558976s;"></div>
<div class="bubble" style="--size:4.216456511049513rem; --distance:6.010501553092078rem; --position:68.86162836258079%; --time:2.9320909641971977s; --delay:-3.565919418687508s;"></div>
<div class="bubble" style="--size:3.3115172028881226rem; --distance:8.20275406427595rem; --position:14.956471172448495%; --time:2.8927084960025002s; --delay:-3.6107977797338346s;"></div>
<div class="bubble" style="--size:3.0456533404176147rem; --distance:6.169757615952609rem; --position:74.74449441725109%; --time:3.7469168722809587s; --delay:-3.7213966197819484s;"></div>
<div class="bubble" style="--size:3.245595120792725rem; --distance:9.874506659971722rem; --position:50.60229713405977%; --time:3.6530937301343527s; --delay:-2.9817660295700272s;"></div>
<div class="bubble" style="--size:4.094598845110745rem; --distance:6.7008413513941125rem; --position:44.69804924176207%; --time:2.0206023136291122s; --delay:-3.4083742548811244s;"></div>
<div class="bubble" style="--size:3.311960647013212rem; --distance:9.128798573372416rem; --position:18.818305037974174%; --time:3.0230215765863924s; --delay:-3.5300935416257406s;"></div>
<div class="bubble" style="--size:2.6810171208175113rem; --distance:6.320124619082375rem; --position:74.43086482193863%; --time:3.974258497427544s; --delay:-2.390082687353762s;"></div>
<div class="bubble" style="--size:5.517334049097393rem; --distance:6.283899193347374rem; --position:62.53846732472081%; --time:3.1682570227872415s; --delay:-3.4697956335913593s;"></div>
<div class="bubble" style="--size:4.04218371788758rem; --distance:9.100024687065872rem; --position:33.96832264193209%; --time:3.0383532273076455s; --delay:-3.869404600062202s;"></div>
<div class="bubble" style="--size:4.316093920924239rem; --distance:9.28904803293498rem; --position:23.379713516412476%; --time:3.510114268607052s; --delay:-3.5150211478286013s;"></div>
<div class="bubble" style="--size:5.536617701761642rem; --distance:9.164577441666365rem; --position:87.79408927461351%; --time:3.4932893834538543s; --delay:-2.4895368427680227s;"></div>
<div class="bubble" style="--size:4.629677373463819rem; --distance:6.017265602940271rem; --position:27.417591473609427%; --time:3.00659055517824s; --delay:-2.2743129513508s;"></div>
<div class="bubble" style="--size:4.855680981712382rem; --distance:7.761260936792523rem; --position:81.99960293321988%; --time:2.8312031781687086s; --delay:-3.8632713094263122s;"></div>
<div class="bubble" style="--size:4.765966991185717rem; --distance:8.322949312286566rem; --position:70.18501280227404%; --time:2.305225876404957s; --delay:-3.6006103204888595s;"></div>
<div class="bubble" style="--size:4.182616413329973rem; --distance:9.583698097764582rem; --position:57.49751446198114%; --time:3.014772882501452s; --delay:-3.623383253223434s;"></div>
<div class="bubble" style="--size:5.323254873270464rem; --distance:7.717910987394075rem; --position:61.60743888850024%; --time:3.223408082882445s; --delay:-3.5749468338216683s;"></div>
<div class="bubble" style="--size:3.2561464410675836rem; --distance:8.074185902808189rem; --position:24.540459161146714%; --time:3.2301593697243574s; --delay:-3.5529046347930855s;"></div>
<div class="bubble" style="--size:3.687035173701788rem; --distance:8.117985328082412rem; --position:83.24640324726207%; --time:3.2445339761845684s; --delay:-3.3442668896304784s;"></div>
<div class="bubble" style="--size:4.213794110247155rem; --distance:8.7618759004154rem; --position:17.396792657571535%; --time:2.499850209010619s; --delay:-2.837579102085362s;"></div>
<div class="bubble" style="--size:3.6296621496045898rem; --distance:8.283795627416914rem; --position:100.79590026085778%; --time:2.4475132024064377s; --delay:-3.601370691771108s;"></div>
<div class="bubble" style="--size:5.242606748296074rem; --distance:6.487868361686799rem; --position:23.27452808590728%; --time:2.669402848327513s; --delay:-3.579169718787805s;"></div>
<div class="bubble" style="--size:4.769025889656007rem; --distance:7.6005912374651095rem; --position:90.12528352272153%; --time:2.321922199935652s; --delay:-2.3399140535307574s;"></div>
<div class="bubble" style="--size:3.981991999651859rem; --distance:8.489842791132286rem; --position:65.47211049418785%; --time:3.4224006061365557s; --delay:-2.316371256885457s;"></div>
<div class="bubble" style="--size:5.000379738234781rem; --distance:8.481864673422255rem; --position:60.2571733467134%; --time:3.797326787400806s; --delay:-2.070499055872921s;"></div>
<div class="bubble" style="--size:3.826565079266163rem; --distance:7.72209934115162rem; --position:4.579404046233233%; --time:3.4934718081202267s; --delay:-3.1289415898512156s;"></div>
<div class="bubble" style="--size:3.211314384221816rem; --distance:6.796155422834089rem; --position:15.538261496385271%; --time:2.1549360891098663s; --delay:-2.466816194210377s;"></div>
<div class="bubble" style="--size:3.801441839653041rem; --distance:6.015486852207017rem; --position:58.85077707002126%; --time:2.3936843033912965s; --delay:-3.4797258634167427s;"></div>
<div class="bubble" style="--size:2.864570007359749rem; --distance:6.550472097530445rem; --position:0.3407776732337968%; --time:3.110445411366918s; --delay:-3.1969545143489917s;"></div>
<div class="bubble" style="--size:3.4323688982783622rem; --distance:6.386678148301719rem; --position:37.333373358801765%; --time:2.613638450106586s; --delay:-3.1882907637309374s;"></div>
<div class="bubble" style="--size:3.4327256924293987rem; --distance:7.738515222296738rem; --position:60.302962071070226%; --time:3.5004473260753466s; --delay:-3.4106199475786982s;"></div>
<div class="bubble" style="--size:3.4780121633549337rem; --distance:9.3516155417918rem; --position:75.35279774119593%; --time:3.368301811296411s; --delay:-2.182575467488616s;"></div>
<div class="bubble" style="--size:3.9296435173981257rem; --distance:9.914304060178626rem; --position:89.29633485100007%; --time:3.3866697703835262s; --delay:-3.2329726143227804s;"></div>
<div class="bubble" style="--size:4.556262283045431rem; --distance:9.785963915338538rem; --position:67.32476826428864%; --time:2.6895202470674s; --delay:-2.214350442854409s;"></div>
<div class="bubble" style="--size:2.5297614984036594rem; --distance:8.217864378305682rem; --position:56.01527268547949%; --time:2.941561811180463s; --delay:-2.694789571296344s;"></div>
<div class="bubble" style="--size:3.339063387079573rem; --distance:8.287620364147704rem; --position:-0.938794756097785%; --time:2.456278236105709s; --delay:-2.4262058787033896s;"></div>
<div class="bubble" style="--size:4.206920388769964rem; --distance:9.014344921980353rem; --position:34.044771182718065%; --time:3.531606046711366s; --delay:-3.661877463039351s;"></div>
<div class="bubble" style="--size:5.192442828580169rem; --distance:6.220474762760752rem; --position:90.337440205801%; --time:3.310557950506893s; --delay:-2.5350626095782838s;"></div>
<div class="bubble" style="--size:4.230144703807682rem; --distance:9.957334621829531rem; --position:94.67870874424376%; --time:3.8737592598531845s; --delay:-2.426576911208067s;"></div>
<div class="bubble" style="--size:3.468675383744488rem; --distance:6.002052506935797rem; --position:88.48450980800325%; --time:3.452438682638131s; --delay:-2.1335655314660644s;"></div>
<div class="bubble" style="--size:5.946878590452426rem; --distance:7.677046073293574rem; --position:69.30741970648866%; --time:3.5851831560596645s; --delay:-2.702203571715346s;"></div>
<div class="bubble" style="--size:3.428508178173683rem; --distance:9.172381776422728rem; --position:53.22630289432124%; --time:3.7696417998880705s; --delay:-2.675830412190829s;"></div>
<div class="bubble" style="--size:4.031624894621849rem; --distance:9.467555063629291rem; --position:28.926050347867083%; --time:2.4101418623727806s; --delay:-2.3564606524732388s;"></div>
<div class="bubble" style="--size:2.662399865190576rem; --distance:7.855828495708174rem; --position:15.124678514070503%; --time:3.3339264268806215s; --delay:-3.3385367833493156s;"></div>
<div class="bubble" style="--size:4.683330376287648rem; --distance:6.129693047393836rem; --position:53.7884329009583%; --time:2.957868808905031s; --delay:-2.048366059064498s;"></div>
<div class="bubble" style="--size:4.605643202385635rem; --distance:9.198028766308676rem; --position:81.60591845698326%; --time:2.710089295893532s; --delay:-3.700837920300853s;"></div>
<div class="bubble" style="--size:4.168606299172371rem; --distance:7.092363116070861rem; --position:69.01985651488094%; --time:2.0921940527900706s; --delay:-2.3354295616796366s;"></div>
<div class="bubble" style="--size:3.732622295159696rem; --distance:7.39798599007678rem; --position:28.26164517765298%; --time:2.099108003777202s; --delay:-2.5020651831462164s;"></div>
<div class="bubble" style="--size:3.167397510920533rem; --distance:6.826220628032419rem; --position:37.457907472805765%; --time:3.842692313665199s; --delay:-3.0504536772203026s;"></div>
<div class="bubble" style="--size:2.4951970318319194rem; --distance:9.30877365549317rem; --position:50.082694622048194%; --time:2.8666964146412917s; --delay:-3.581021581311487s;"></div>
<div class="bubble" style="--size:2.817252429177116rem; --distance:9.002324220181324rem; --position:65.28237912709311%; --time:2.8181872470761276s; --delay:-2.2897267176269467s;"></div>
<div class="bubble" style="--size:4.1816729420042575rem; --distance:7.926894109515402rem; --position:41.07478701325475%; --time:3.445728698181794s; --delay:-2.151931227436603s;"></div>
<div class="bubble" style="--size:2.33823239775724rem; --distance:6.241185683236594rem; --position:73.70384153276208%; --time:3.1272321120368227s; --delay:-3.5116283652548548s;"></div>
<div class="bubble" style="--size:4.924925286366399rem; --distance:8.576379237111968rem; --position:58.582847145622566%; --time:2.496618994088878s; --delay:-3.693636049174328s;"></div>
<div class="bubble" style="--size:3.788961211495981rem; --distance:9.264788378534616rem; --position:89.71496993525615%; --time:2.6452229898771233s; --delay:-3.812825775651474s;"></div>
<div class="bubble" style="--size:5.424005690486972rem; --distance:9.874247917643064rem; --position:47.34027702499834%; --time:2.0858970924824285s; --delay:-3.617491897399521s;"></div>
<div class="bubble" style="--size:2.2315706222233063rem; --distance:6.6126636991863785rem; --position:8.805193209812327%; --time:2.349651854326624s; --delay:-3.8753316373744973s;"></div>
<div class="bubble" style="--size:5.699449628650642rem; --distance:8.472950224864995rem; --position:95.31136000300016%; --time:3.6766149119215017s; --delay:-3.3657986086131553s;"></div>
<div class="bubble" style="--size:3.952319154020085rem; --distance:9.79495436093067rem; --position:7.097556927703421%; --time:3.578013933478847s; --delay:-2.936247022870801s;"></div>
<div class="bubble" style="--size:5.33508218702124rem; --distance:7.931027823725438rem; --position:49.20332905041972%; --time:2.937510369058062s; --delay:-2.76038918592304s;"></div>
<div class="bubble" style="--size:2.2792210738040968rem; --distance:9.00849851967115rem; --position:19.631223642788342%; --time:2.479673568844729s; --delay:-2.9839302243428096s;"></div>
<div class="bubble" style="--size:3.257382424404825rem; --distance:9.615879913581852rem; --position:34.42422053322547%; --time:3.7419787368994375s; --delay:-3.216964750539113s;"></div>
<div class="bubble" style="--size:5.9226621355660205rem; --distance:8.497875688745946rem; --position:32.91273905928517%; --time:2.073654128746369s; --delay:-2.1726637550717633s;"></div>
<div class="bubble" style="--size:3.323034904607602rem; --distance:7.660759048511039rem; --position:77.3468596386767%; --time:3.406092500400053s; --delay:-3.688850839106868s;"></div>
<div class="bubble" style="--size:4.724199663032129rem; --distance:8.040126303009767rem; --position:88.23696791319915%; --time:2.5559065614736656s; --delay:-2.0209631002133657s;"></div>
<div class="bubble" style="--size:4.1702088404965805rem; --distance:6.874381899366308rem; --position:10.324160838245488%; --time:2.5877769881636943s; --delay:-2.7046649927792674s;"></div>
<div class="bubble" style="--size:4.558880662156615rem; --distance:6.004764545190202rem; --position:-3.8972128359642477%; --time:2.859062536775255s; --delay:-2.969395178784283s;"></div>
<div class="bubble" style="--size:2.6440931425330625rem; --distance:7.301230442553809rem; --position:55.394080413500284%; --time:2.0509643194363543s; --delay:-2.130160952572942s;"></div>
<div class="bubble" style="--size:3.04457203478288rem; --distance:7.499232794159032rem; --position:7.587176580978511%; --time:3.690323258651836s; --delay:-2.109597872071761s;"></div>
<div class="bubble" style="--size:3.176212126597724rem; --distance:6.781491978585761rem; --position:78.78167637261785%; --time:2.703753868978488s; --delay:-2.4540821639241557s;"></div>
<div class="bubble" style="--size:2.2843944769734597rem; --distance:6.689556129374913rem; --position:66.0904725507657%; --time:3.484108020219961s; --delay:-2.595432121955065s;"></div>
<div class="bubble" style="--size:3.04177460712007rem; --distance:8.050944592526193rem; --position:45.70616352971621%; --time:2.607075386650617s; --delay:-3.927744009448789s;"></div>
<div class="bubble" style="--size:4.838644757818752rem; --distance:9.39178781676422rem; --position:78.20213250934297%; --time:3.892289856943049s; --delay:-2.0358017003232343s;"></div>
<div class="bubble" style="--size:5.998195665434678rem; --distance:9.700719877493265rem; --position:74.12213367452598%; --time:2.7974045750831817s; --delay:-3.5612902882673723s;"></div>
<div class="bubble" style="--size:5.737456468830092rem; --distance:8.011796787697326rem; --position:24.710490513962124%; --time:3.006026809222496s; --delay:-2.950153287963892s;"></div>
<div class="bubble" style="--size:4.020478472259915rem; --distance:6.7875226935694375rem; --position:82.9550629652347%; --time:3.5493331481855s; --delay:-3.6803059260957474s;"></div>
<div class="bubble" style="--size:2.869301868416274rem; --distance:9.354020219520514rem; --position:65.14614682780949%; --time:2.4741142478031377s; --delay:-2.9566538090726353s;"></div>
<div class="bubble" style="--size:2.7215373086650905rem; --distance:9.015415468505582rem; --position:89.60452817743915%; --time:2.9978507491128683s; --delay:-2.0231558395487097s;"></div>
<div class="bubble" style="--size:2.682186765418792rem; --distance:6.589254880152831rem; --position:34.90666694144634%; --time:2.1159213704497537s; --delay:-3.1290599727509627s;"></div>
<div class="bubble" style="--size:5.460524207293897rem; --distance:7.362180282957637rem; --position:15.260833632028739%; --time:3.91672862820858s; --delay:-2.6649657631555823s;"></div>
<div class="bubble" style="--size:4.851399463075725rem; --distance:6.7696909050146425rem; --position:70.1692852933683%; --time:2.997481316443949s; --delay:-3.295132745623189s;"></div>
<div class="bubble" style="--size:5.896083897347195rem; --distance:6.756234371987887rem; --position:20.02032690327773%; --time:2.8401814418306066s; --delay:-3.532539983846999s;"></div>
<div class="bubble" style="--size:5.3110516002145385rem; --distance:8.230277824207098rem; --position:63.0839471644788%; --time:3.6259440787292396s; --delay:-2.6224961297123315s;"></div>
<div class="bubble" style="--size:5.220976981502898rem; --distance:7.731989829460063rem; --position:13.51699711210929%; --time:3.2381562848867356s; --delay:-3.550619470978188s;"></div>
<div class="bubble" style="--size:3.634999842635324rem; --distance:9.501007703669114rem; --position:44.07581182072189%; --time:2.0727374728244525s; --delay:-3.9097301287754664s;"></div>
</div>
<div class="content">
<div class="footer__addr">
<h1 class="footer__logo">Culture</h1>
<h2>Contact</h2>
<address>
Hunan Normal University<br>
<a class="footer__btn" href="mailto://1966752024@qq.com">Email Us</a>
</address>
</div>
<div>
<ul class="footer__nav">
<li class="nav__item nav__item--extra">
<h1 class="nav__title">Links|友情链接</h1>
<ul class="nav__ul nav__ul--extra">
<li>
<a href="https://news.google.com/">Google News</a>
</li>
<li>
<a href="https://www.youtube.com/">Youtube</a>
</li>
<li>
<a href="https://twitter.com">Twitter</a>
</li>
<li>
<a href="https://instagram.com">Instagram</a>
</li>
<li>
<a href="https://global.chinadaily.com.cn">China Daily</a>
</li>
<li>
<a href="http://www.github.com">GitHub</a>
</li>
<li>
<a href="https://www.amazon.com">Amazon</a>
</li>
<li>
<a href="http://www.goodreads.com/">GoodReads</a>
</li>
<li>
<a href="https://www.rottentomatoes.com/">烂番茄</a>
</li>
<li>
<a href="https://www.douban.com">豆瓣</a>
</li>
<li>
<a href="https://www.imdb.com/">IMDb</a>
</li>
</ul>
</li>
</ul>
</div>
<div>
<a class="image" href="" target="_blank"><i style="font-size: 24px" class="iconfont icon-global-fill"></i></a>
<p>&copy; 2023 ASLCCICE. All rights reserved.</p>
</div>
</div>
</div>
<!-- <svg style="position:fixed; top:100vh">-->
<!-- <defs>-->
<!-- <filter id="blob">-->
<!-- <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>-->
<!-- <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob"></feColorMatrix>-->
<!-- &lt;!&ndash;feComposite(in="SourceGraphic" in2="blob" operator="atop") //After reviewing this after years I can't remember why I added this but it isn't necessary for the blob effect&ndash;&gt;-->
<!-- </filter>-->
<!-- </defs>-->
<!-- </svg>-->
<!-- partial -->
</div>
</template>
<script>
export default {
name: "MyFooter"
}
</script>
<style scoped lang="scss">
.footer ul {
margin-left: -500px;
list-style: none;
padding-left: 0;
}
.nav__title {
font-weight: 400;
font-size: 15px;
margin-left: -100px;
color: white;
}
@media screen and (min-width: 24.375em) {
.legal .legal__links {
margin-left: auto;
}
}
@media screen and (min-width: 40.375em) {
.footer__nav > * {
flex: 1;
}
.nav__item--extra {
flex-grow: 2;
}
.footer__addr {
flex: 1 0px;
}
.footer__nav {
flex: 2 0px;
}
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
}
.footer__nav {
display: flex;
flex-flow: row wrap;
}
.footer__nav > * {
flex: 1 50%;
margin-right: 1.25em;
}
.nav__ul a {
color: #999;
}
.nav__ul--extra {
column-count: 4;
column-gap: 1.25em;
}
.footer__addr {
//margin-left: 5%;
//margin-right: 0.25em;
//margin-bottom: 2em;
color: white;
}
.footer__btn {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
max-width: max-content;
background-color: rgb(33, 33, 33, 0.07);
border-radius: 100px;
color: #2f2f2f;
line-height: 0;
margin: 0.6em 0;
font-size: 1rem;
padding: 0 1.3em;
}
.footer__logo {
font-family: 华文楷体;
font-weight: 600;
/*text-transform: lowercase;*/
font-size: 1.5rem;
color: #eee;
}
.footer__addr h2 {
margin-top: 1.3em;
font-size: 15px;
font-weight: 400;
}
.legal {
display: flex;
flex-wrap: wrap;
color: #999;
}
.body{
display: grid;
grid-template-rows: 1fr 10rem auto;
grid-template-areas: "main" "." "footer";
overflow-x: hidden;
//background: #F5F7FA;
//min-height: 100vh;
margin-top: -100px;
font-family: "Times New Roman", sans-serif;
}
.footer {
z-index: 1;
--footer-background:#195161;
display: grid;
position: relative;
grid-area: footer;
//min-height: 12rem;
}
.footer .bubbles {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1rem;
background: var(--footer-background);
filter: url("#blob");
}
.footer .bubbles .bubble {
position: absolute;
left: var(--position, 50%);
background: var(--footer-background);
border-radius: 50%;
-webkit-animation: bubble-size var(--time, 5s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
transform: translate(-50%, 100%);
}
.footer .content {
z-index: 2;
display: flex;
//grid-template-columns: 1fr auto;
//grid-gap: 1rem;
flex-direction: row;
padding: 2rem;
background: var(--footer-background);
}
.footer .content a, .footer .content p {
color: #F5F7FA;
text-decoration: none;
}
.footer .content b {
color: white;
}
.footer .content p {
margin: 0;
font-size: 0.75rem;
}
.footer .content > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.footer .content > div > div {
margin: 0.25rem 0;
}
.footer .content > div > div > * {
margin-right: 0.5rem;
}
.footer .content > div .image {
align-self: center;
width: 4rem;
height: 4rem;
margin: 0.25rem 0;
background-size: cover;
background-position: center;
}
@-webkit-keyframes bubble-size {
0%, 75% {
width: var(--size, 4rem);
height: var(--size, 4rem);
}
100% {
width: 0rem;
height: 0rem;
}
}
@keyframes bubble-size {
0%, 75% {
width: var(--size, 2rem);
height: var(--size, 2rem);
}
100% {
width: 0rem;
height: 0rem;
}
}
@-webkit-keyframes bubble-move {
0% {
bottom: -4rem;
}
100% {
bottom: var(--distance, 10rem);
}
}
@keyframes bubble-move {
0% {
bottom: -4rem;
}
100% {
bottom: var(--distance, 10rem);
}
}
</style>

149
code/frontend/src/views/user/profile/index.vue
Unescape View File

@ -0,0 +1,149 @@
<template>
<div class="app-container">
<el-row :gutter="40">
<el-col :span="8" :xs="24">
<el-card class="box-card animate__animated animate__slideInLeft">
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<div>
<div class="text-center">
<userAvatar />
</div>
<ul class="list-group list-group-striped">
<li class="list-group-item">
<i class="el-icon-user"></i>用户名
<div class="pull-right">{{ user.username }}</div>
</li>
<li class="list-group-item">
<i class="el-icon-postcard"></i>用户昵称
<div class="pull-right">{{ user.nickname }}</div>
</li>
<li class="list-group-item">
<i class="el-icon-mobile"></i>手机号码
<div class="pull-right">{{ user.phone }}</div>
</li>
<li class="list-group-item">
<i class="el-icon-message"></i>用户邮箱
<div class="pull-right">{{ user.email }}</div>
</li>
<li class="list-group-item">
<i class="el-icon-office-building"></i>工作单位
<div class="pull-right">{{ user.workUnit }}</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="16" :xs="24">
<el-card class="box-card animate__animated animate__slideInRight">
<div slot="header" class="clearfix">
<span>个人信息</span>
<el-button style="float: right" type="danger" size="mini" @click="logout">退出登录</el-button>
</div>
<el-tabs v-model="activeTab" type="border-card" id="info-tab">
<el-tab-pane label="基本资料" name="userinfo">
<userInfo :user="user" />
</el-tab-pane>
<el-tab-pane label="修改密码" name="resetPwd">
<resetPwd />
</el-tab-pane>
<el-tab-pane label="监测作品列表" name="monitor-works">
<monitor-list :user-id="user.id"></monitor-list>
</el-tab-pane>
<el-tab-pane label="申请监测" name="monitor-request">
<apply-monitor></apply-monitor>
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import {getUserProfile} from "../../../api/userAPI";
import monitorList from "../../../components/user/common/monitorList";
import applyMonitor from "../../../components/user/common/applyMonitor";
import 'animate.css'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Profile",
components: {
userAvatar,
userInfo,
resetPwd,
monitorList,
applyMonitor
},
data() {
return {
user: {},
roleGroup: "用户",
postGroup: "",
activeTab: "userinfo"
};
},
created() {
this.getUser();
},
mounted() {
},
methods: {
getUser() {
getUserProfile().then(res=>{
if (res.code === "0") {
this.user = res.data;
// console.log(this.user)
} else {
console.log(res.msg)
}
})
},
logout() {
this.$confirm('退出登录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
setTimeout(() => { // 用户退出登录
this.$store.dispatch("Logout").then(()=>{
this.$message({
type: 'success',
message: '已退出登录!'
})
this.$router.push("/home")
})
// location.reload()
}, 1000)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消'
})
})
}
}
};
</script>
<style scoped lang="scss">
.box-card {
background-color: #dde5f3;
}
.app-container {
overflow: hidden;
}
#info-tab {
//background-color: #f1f1f5;
}
</style>

92
code/frontend/src/views/user/profile/resetPwd.vue
Unescape View File

@ -0,0 +1,92 @@
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-row>
<el-col :span="15" :xs="24">
<el-form-item label="旧密码" prop="oldPwd">
<el-input id="oldPwd" v-model="user.oldPwd" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="15" :xs="24">
<el-form-item label="新密码" prop="newPwd">
<el-input id="newPwd" v-model="user.newPwd" placeholder="请输入新密码" type="password" show-password/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="15" :xs="24">
<el-form-item label="确认密码" prop="confirmPassword">
<el-input id="confirmPassword" v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
</el-form-item>
</el-form>
</template>
<script>
import {updateUserPassword} from "../../../api/userAPI";
export default {
components: {
},
data() {
const equalToPassword = (rule, value, callback) => {
console.log(value)
if (this.user.newPwd !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
user: {
oldPwd: "",
newPwd: "",
confirmPassword: ""
},
updatePwdInfo: {
},
// 表单校验
rules: {
oldPwd: [
{ required: true, message: "旧密码不能为空", trigger: "blur" }
],
newPwd: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" }
]
}
};
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserPassword(this.user).then(res => {
if (res.code === "0") {
this.$message.success("修改成功");
// 将密码输入框全设置为空
this.user.newPwd = "";
this.user.oldPwd = "";
this.user.confirmPassword = "";
} else {
this.$message.error(res.msg);
}
});
}
});
},
}
};
</script>

191
code/frontend/src/views/user/profile/userAvatar.vue
Unescape View File

@ -0,0 +1,191 @@
<template>
<div>
<div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
<el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper
ref="cropper"
:img="options.img"
:info="true"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox"
:outputType="options.outputType"
@realTime="realTime"
v-if="visible"
/>
</el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}">
<div class="avatar-upload-preview">
<img :src="previews.url" :style="previews.img" />
</div>
</el-col>
</el-row>
<br />
<el-row>
<el-col :lg="2" :sm="3" :xs="3">
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
<el-button size="small">
选择
<i class="el-icon-upload el-icon--right"></i>
</el-button>
</el-upload>
</el-col>
<el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
</el-col>
<el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
</el-col>
<el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import {debounce, updateUserInfo} from "../../../utils/util";
import {fileUpload} from "../../../api/fileAPI";
import {userUpdate} from "../../../api/userAPI";
import {setLocalStorageItem} from "../../../utils/auth";
export default {
components: { VueCropper },
data() {
return {
// 是否显示弹出层
open: false,
// 是否显示cropper
visible: false,
// 弹出层标题
title: "修改头像",
options: {
img: this.$store.getters.avatar, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 250, // 默认生成截图框宽度
autoCropHeight: 250, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
outputType:"png" // 默认生成截图为PNG格式
},
previews: {},
resizeHandler: null
};
},
created() {
// console.log(this.options.img)
// console.log(this.$store.state.admin)
},
methods: {
// 编辑头像
editCropper() {
this.open = true;
},
// 打开弹出层结束时的回调
modalOpened() {
this.visible = true;
if (!this.resizeHandler) {
this.resizeHandler = debounce(() => {
this.refresh()
}, 100)
}
window.addEventListener("resize", this.resizeHandler)
},
// 刷新组件
refresh() {
this.$refs.cropper.refresh();
},
// 覆盖默认的上传行为
requestUpload() {
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 图片缩放
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 上传预处理
beforeUpload(file) {
if (file.type.indexOf("image/") === -1) {
this.$message.error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.options.img = reader.result;
};
}
},
// 上传图片
uploadImg() {
this.$refs.cropper.getCropBlob(data => {
let formData = new FormData();
formData.append("file", data);
// console.log(formData)
// console.log(data)
this.$store.dispatch("uploadAvatar", formData).then((res)=>{
if (res.code === "0") {
this.open = false
this.visible = false;
this.options.img = res.data;
}
})
});
},
// 实时预览
realTime(data) {
// console.log(data)
this.previews = data;
},
// 关闭窗口
closeDialog() {
this.options.img = this.$store.getters.avatar
this.visible = false;
window.removeEventListener("resize", this.resizeHandler)
}
}
};
</script>
<style scoped lang="scss">
.user-info-head {
position: relative;
display: inline-block;
height: 120px;
}
.user-info-head:hover:after {
content: '+';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #eee;
background: rgba(0, 0, 0, 0.5);
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
line-height: 110px;
border-radius: 50%;
}
</style>

105
code/frontend/src/views/user/profile/userInfo.vue
Unescape View File

@ -0,0 +1,105 @@
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-row>
<el-col :span="15" :xs="24">
<el-form-item label="用户昵称" prop="nickname">
<el-input id="name" v-model="user.nickname" maxlength="30" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="15" :xs="24">
<el-form-item label="手机号码" prop="phone">
<el-input id="phone" v-model="user.phone" maxlength="11" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="15" :xs="24">
<el-form-item label="邮箱" prop="email">
<el-input id="email" v-model="user.email" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="15" :xs="24">
<el-form-item label="工作单位" prop="workUnit">
<el-input id="workUnit" v-model="user.workUnit" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<!-- <el-form-item label="性别">
<el-radio-group v-model="admin.name">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
</el-radio-group>
</el-form-item>-->
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
</el-form-item>
</el-form>
</template>
<script>
import {userUpdate} from "../../../api/userAPI";
import {updateLocalUserInfo} from "../../../utils/util";
export default {
props: {
user: {
type: Object
}
},
data() {
return {
// 表单校验
rules: {
nickname: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phone: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
methods: {
submit() { // 提交管理员信息的修改
this.$refs["form"].validate(valid => {
if (valid) {
// 要修改的信息
const updateInfo = {
id: this.user.id,
name: this.user.nickname,
phone: this.user.phone,
email: this.user.email,
workUnit: this.user.workUnit
}
userUpdate(updateInfo).then(res => {
if (res.code === "0") {
this.$message.success("修改用户个人信息成功");
updateLocalUserInfo()
} else {
this.$message.success("修改用户个人信息失败");
}
});
}
});
},
}
};
</script>

BIN
doc/prototype/个人中心页面.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 70 KiB

BIN
doc/prototype/线下活动页面.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 354 KiB

After

Width:  |  Height:  |  Size: 353 KiB

BIN
doc/prototype/虚拟体验页面.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 KiB

After

Width:  |  Height:  |  Size: 197 KiB

BIN
doc/prototype/论坛页面.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 401 KiB

After

Width:  |  Height:  |  Size: 401 KiB

BIN
doc/prototype/首页-上.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 116 KiB

BIN
doc/prototype/首页-下.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 199 KiB

Write Preview
Loading…
Cancel
Save