说明:1、主页每日一句模块粗略完成
This commit is contained in:
parent
fb4d4c62ed
commit
abb1edbe8d
|
|
@ -0,0 +1,13 @@
|
||||||
|
//首页 api
|
||||||
|
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
|
||||||
|
// 查询英语单词列表
|
||||||
|
export function getApiAWord(query) {
|
||||||
|
return request({
|
||||||
|
url: '/openapi/aword/',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -1,25 +1,137 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--todo 首页统计 -->
|
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="grid-content bg-purple">
|
||||||
|
<!--每日一句-->
|
||||||
|
<div class="box-card">
|
||||||
|
<div class="aWordImage">
|
||||||
|
<img :src=apiAWord.imgurl class="aWordImage">
|
||||||
|
</div>
|
||||||
|
<div class="aWordAudio">
|
||||||
|
<audio :src=apiAWord.tts controls="controls">
|
||||||
|
您的浏览器不支持 audio 标签。
|
||||||
|
</audio>
|
||||||
|
</div>
|
||||||
|
<div class="aWordContent">
|
||||||
|
<span>{{ apiAWord.content }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="aWordNote">
|
||||||
|
<span>{{ apiAWord.note }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<!--todo 天气预报 -->
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="grid-content bg-purple">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="20">
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
import {getApiAWord} from "@/api/index";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Index",
|
name: "Index",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
//响应数据
|
||||||
|
apiAWord: {},
|
||||||
|
|
||||||
|
//apiAWord请求参数
|
||||||
|
apiAWordParams: {
|
||||||
|
rand: 1
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getApiAWord();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//随机获取一条每日一句
|
||||||
|
getApiAWord() {
|
||||||
|
getApiAWord(this.apiAWordParams).then(res => {
|
||||||
|
this.apiAWord = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
.bg-purple {
|
||||||
|
background: #d3dce6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-content {
|
||||||
|
border-radius: 4px;
|
||||||
|
min-height: 36px;
|
||||||
|
height: 141px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
width: 744px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
height: 141px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card div {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.aWordImage {
|
||||||
|
float: left;
|
||||||
|
width: 108px;
|
||||||
|
height: 141px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aWordAudio {
|
||||||
|
float: left;
|
||||||
|
height: 141px;
|
||||||
|
width: 300px;
|
||||||
|
/*flex 布局*/
|
||||||
|
display: flex;
|
||||||
|
/*实现垂直居中*/
|
||||||
|
align-items: center;
|
||||||
|
/*实现水平居中*/
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aWordContent {
|
||||||
|
float: left;
|
||||||
|
width: 168px;
|
||||||
|
height: 141px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aWordNote {
|
||||||
|
width: 168px;
|
||||||
|
height: 141px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
float: left;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getCodeImg } from "@/api/login";
|
import { getCodeImg,getRegisterOff } from "@/api/login";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||||
|
|
||||||
|
|
@ -91,7 +91,7 @@ export default {
|
||||||
// 验证码开关
|
// 验证码开关
|
||||||
captchaOnOff: true,
|
captchaOnOff: true,
|
||||||
// 注册开关
|
// 注册开关
|
||||||
register: false,
|
register: true,
|
||||||
redirect: undefined
|
redirect: undefined
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue