带鱼搭建
This commit is contained in:
parent
3c57595d23
commit
dd21fe8f91
|
|
@ -0,0 +1,2 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "default",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.6.5",
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.6.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.8.0",
|
||||
"@vue/cli-service": "^3.8.0",
|
||||
"axios": "^1.6.7",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>default</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body,html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,92 @@
|
|||
[
|
||||
{
|
||||
"id": 1,
|
||||
"foodsType": 1,
|
||||
"sportName": "白领健身操",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E7%99%BD%E9%A2%86%E5%81%A5%E8%BA%AB%E6%93%8D.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/2%E7%99%BD%E9%A2%86%E5%81%A5%E8%BA%AB%E6%93%8D.mp4",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"foodsType": 1,
|
||||
"sportName": "交叉步触地",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E4%BA%A4%E5%8F%89%E6%AD%A5%E8%A7%A6%E5%9C%B0.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7018-20.m4v",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"foodsType": 1,
|
||||
"sportName": "左右抬腿肘触膝",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E5%B7%A6%E5%8F%B3%E6%8A%AC%E8%85%BF%E8%82%98%E8%A7%A6%E8%86%9D.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7017-20.mp4",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"foodsType": 1,
|
||||
"sportName": "下蹲跳",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E4%B8%8B%E8%B9%B2%E8%B7%B3.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E5%BA%93%E8%A7%86%E9%A2%91/t7036-15.m4v",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id":5,
|
||||
"foodsType": 1,
|
||||
"sportName": "自重深蹲",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E4%B8%8B%E8%B9%B2%E8%B7%B3.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/6089-8xin.mp4",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"foodsType": 1,
|
||||
"sportName": "自重深蹲",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E8%87%AA%E9%87%8D%E6%B7%B1%E8%B9%B2.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/6089-8xin.mp4",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"foodsType": 1,
|
||||
"sportName": "跪姿俯卧撑渐进提膝单腿后抬",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E8%B7%AA%E5%A7%BF%E4%BF%AF%E5%8D%A7%E6%92%91%E6%B8%90%E8%BF%9B%E6%8F%90%E8%86%9D%E5%8D%95%E8%85%BF%E5%90%8E%E6%8A%AC.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7008-20.mp4",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"foodsType": 1,
|
||||
"sportName": "登山跑",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E7%99%BB%E5%B1%B1%E8%B7%91.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7039-15.m4v",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"foodsType": 1,
|
||||
"sportName": "平板支撑",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E5%B9%B3%E6%9D%BF%E6%94%AF%E6%92%91.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/A6082-15xin.mp4",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"foodsType": 1,
|
||||
"sportName": "仰卧屈膝收腹",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type1/%E4%BB%B0%E5%8D%A7%E5%B1%88%E8%86%9D%E6%94%B6%E8%85%B9.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7060-15.mp4",
|
||||
"content": "对高血糖患者来说，尽可能在饭后1～2小时运动,有利于控制血糖的稳定。<br>运动强度以低、中强度为宜，高强度运动可能导致血糖波动幅度较大，严重时可能导致病情加重。<br>每次运动时间要在30-40分钟最佳，可根据自身情况进行调整。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。<br>糖尿病足患者在有足部破溃的情况下不建议进行常规运动，可以进行非负重运动，比如毕格尔运动，增加足部和下肢的血液循环。",
|
||||
"flag": 1
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
[
|
||||
{
|
||||
"id": 12,
|
||||
"foodsType": 2,
|
||||
"sportName": "站立侧弯",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E7%AB%99%E7%AB%8B%E4%BE%A7%E5%BC%AF.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/4%E5%BF%83%E8%BD%AE-%E7%AB%99%E7%AB%8B%E4%BE%A7%E5%BC%AF.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"foodsType": 2,
|
||||
"sportName": "站姿直腿上摆",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E7%AB%99%E5%A7%BF%E7%9B%B4%E8%85%BF%E4%B8%8A%E6%91%86.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/%E5%8D%95%E4%BE%A7%E8%A7%86%E9%A2%91%E5%89%AA%E8%BE%91/d6119-8.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"foodsType": 2,
|
||||
"sportName": "单腿站立屈膝",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E5%8D%95%E8%85%BF%E7%AB%99%E7%AB%8B%E5%B1%88%E8%86%9D.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/%E5%8D%95%E4%BE%A7%E8%A7%86%E9%A2%91%E5%89%AA%E8%BE%91/d6106-8.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"foodsType": 2,
|
||||
"sportName": "地板触摸单脚跳",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E5%9C%B0%E6%9D%BF%E8%A7%A6%E6%91%B8%E5%8D%95%E8%84%9A%E8%B7%B3.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/9042-15xin.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"foodsType": 2,
|
||||
"sportName": "弓步后转体",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E5%BC%93%E6%AD%A5%E5%90%8E%E8%BD%AC%E4%BD%93.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/3017-20xin.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"foodsType": 2,
|
||||
"sportName": "坐姿颈后臂屈伸",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E5%9D%90%E5%A7%BF%E9%A2%88%E5%90%8E%E8%87%82%E5%B1%88%E4%BC%B8.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/6073-8xin.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"foodsType": 2,
|
||||
"sportName": "自重箭步蹲",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E8%87%AA%E9%87%8D%E7%AE%AD%E6%AD%A5%E8%B9%B2.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/6090-8xin.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"foodsType": 2,
|
||||
"sportName": "上斜俯卧撑",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E4%B8%8A%E6%96%9C%E4%BF%AF%E5%8D%A7%E6%92%91.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/f6001-8.m4v",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
"foodsType": 2,
|
||||
"sportName": "雨刷式",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type2/%E9%9B%A8%E5%88%B7%E5%BC%8F.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/2%E8%85%B9%E8%BD%AE-%E9%9B%A8%E5%88%B7%E5%BC%8F.mp4",
|
||||
"content": "高血压人群运动时需要注意，不要憋气，憋气会使得血压骤升。<br>运动强度的判断标准应以自身不感到难受为宜，不要过于勉强。<br>另外，任何一种运动，如果你在锻炼时候出现恶心、头晕、胸痛、呼吸短促、心脏剧烈跳动等情况，就说明运动强度太大了，需立即停止运动，并及时监测血压情况。<br>当血压过高时，禁止进行运动。",
|
||||
"flag": 1
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
[
|
||||
{
|
||||
"id": 21,
|
||||
"foodsType": 3,
|
||||
"sportName": "俯身双侧臂屈伸",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E4%BF%AF%E8%BA%AB%E5%8F%8C%E4%BE%A7%E8%87%82%E5%B1%88%E4%BC%B8.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E4%BF%AF%E8%BA%AB%E5%8F%8C%E4%BE%A7%E8%87%82%E5%B1%88%E4%BC%B8.mp4",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
"foodsType": 3,
|
||||
"sportName": "双臂反向弯举",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E5%8F%8C%E8%87%82%E5%8F%8D%E5%90%91%E5%BC%AF%E4%B8%BE.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E8%BF%90%E5%8A%A8%E8%A7%86%E9%A2%91%E5%86%8D%E5%89%AA%E8%BE%91/%E5%8D%95%E4%BE%A7%E8%A7%86%E9%A2%91%E5%89%AA%E8%BE%91/d6119-8.mp4",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 23,
|
||||
"foodsType": 3,
|
||||
"sportName": "双腿硬拉",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E5%8F%8C%E8%85%BF%E7%A1%AC%E6%8B%89.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E5%8F%8C%E8%85%BF%E7%A1%AC%E6%8B%89~1.mp4",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 24,
|
||||
"foodsType": 3,
|
||||
"sportName": "阻力跳箱",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E9%98%BB%E5%8A%9B%E8%B7%B3%E7%AE%B1.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E9%98%BB%E5%8A%9B%E8%B7%B3%E7%AE%B1.mp4",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 25,
|
||||
"foodsType": 3,
|
||||
"sportName": "阻力动态分腿蹲",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E9%98%BB%E5%8A%9B%E5%8A%A8%E6%80%81%E5%88%86%E8%85%BF%E8%B9%B2.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E9%98%BB%E5%8A%9B%E5%8A%A8%E6%80%81%E5%88%86%E8%85%BF%E8%B9%B2.mp4",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 26,
|
||||
"foodsType": 3,
|
||||
"sportName": "侧桥",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E4%BE%A7%E6%A1%A5.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/%E4%BE%A7%E6%A1%A5.mp4",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 27,
|
||||
"foodsType": 3,
|
||||
"sportName": "对侧登山跑",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E5%AF%B9%E4%BE%A7%E7%99%BB%E5%B1%B1%E8%B7%91.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7068-15.mp4",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 28,
|
||||
"foodsType": 3,
|
||||
"sportName": "卷腹",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type3/%E5%8D%B7%E8%85%B9.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/f6081-15.m4v",
|
||||
"content": "高血脂患者运动要选择有节奏、重复性强、运动强度适宜的运动，有利于养成良好的运动习惯，规律运动也更有利于降低血脂水平。<br>运动强度选择中等强度为宜，研究表明，低强度运动达不到锻炼效果，也不能辅助降血脂，高强度运动还有增加血脂异常的风险。<br>运动时间每次维持在30-60min，每周5-7次。<br>体重较重、合并有膝关节炎者要减少膝关节受力，可选择游泳，骑自行车等有氧运动。",
|
||||
"flag": 1
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
[
|
||||
{
|
||||
"id": 29,
|
||||
"foodsType": 4,
|
||||
"sportName": "瑜伽-站立侧弯",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E7%91%9C%E4%BC%BD-%E7%AB%99%E7%AB%8B%E4%BE%A7%E5%BC%AF.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/4%E5%BF%83%E8%BD%AE-%E7%AB%99%E7%AB%8B%E4%BE%A7%E5%BC%AF.mp4",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 30,
|
||||
"foodsType": 4,
|
||||
"sportName": "瑜伽-战士二式",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E7%91%9C%E4%BC%BD-%E6%88%98%E5%A3%AB%E4%BA%8C%E5%BC%8F.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/4%E5%BF%83%E8%BD%AE-%E6%88%98%E5%A3%AB%E4%BA%8C%E5%BC%8F.mp4",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 31,
|
||||
"foodsType": 4,
|
||||
"sportName": "普拉提-加强核心",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E6%99%AE%E6%8B%89%E6%8F%90-%E5%8A%A0%E5%BC%BA%E6%A0%B8%E5%BF%83.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/3%E5%8A%A0%E5%BC%BA%E6%A0%B8%E5%BF%831.mp4",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 32,
|
||||
"foodsType": 4,
|
||||
"sportName": "瑜伽-反桌面式",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E7%91%9C%E4%BC%BD-%E5%8F%8D%E6%A1%8C%E9%9D%A2%E5%BC%8F.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/5%E5%96%89%E8%BD%AE-%E5%8F%8D%E6%A1%8C%E9%9D%A2%E5%BC%8F.mp4",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 33,
|
||||
"foodsType": 4,
|
||||
"sportName": "瑜伽-头碰膝前屈伸展坐式",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E7%91%9C%E4%BC%BD-%E5%A4%B4%E7%A2%B0%E8%86%9D%E5%89%8D%E5%B1%88%E4%BC%B8%E5%B1%95%E5%9D%90%E5%BC%8F.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/1%E6%B5%B7%E5%BA%95%E8%BD%AE-%E5%A4%B4%E7%A2%B0%E8%86%9D%E5%89%8D%E5%B1%88%E4%BC%B8%E5%B1%95%E5%9D%90%E5%BC%8F.mp4",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 34,
|
||||
"foodsType": 4,
|
||||
"sportName": "瑜伽-仰卧扭转",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E7%91%9C%E4%BC%BD-%E4%BB%B0%E5%8D%A7%E6%89%AD%E8%BD%AC.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/2%E8%85%B9%E8%BD%AE-%E4%BB%B0%E5%8D%A7%E6%89%AD%E8%BD%AC.mp4",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 35,
|
||||
"foodsType": 4,
|
||||
"sportName": "瑜伽-仰卧单双腿抬",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E7%91%9C%E4%BC%BD-%E4%BB%B0%E5%8D%A7%E5%8D%95%E5%8F%8C%E8%85%BF%E6%8A%AC.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/3%E8%84%90%E8%BD%AE-%E4%BB%B0%E5%8D%A7%E5%8D%95%E5%8F%8C%E8%85%BF%E6%8A%AC.mp4",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 36,
|
||||
"foodsType": 4,
|
||||
"sportName": "普拉提-瘦腹去肚",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type4/%E6%99%AE%E6%8B%89%E6%8F%90-%E7%98%A6%E8%85%B9%E5%8E%BB%E8%82%9A.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/f6081-15.m4v",
|
||||
"content": "高尿酸人群运动时要注意监测尿酸值，要注意适量运动，过量运动会导致尿酸值升高。<br>运动以有氧运动为主，无氧运动可能会使尿酸升高，加剧痛风风险。运动强度选择中等强度为宜。<br>处于痛风发作急性期以及痛风缓解后的4周内禁止参加运动。",
|
||||
"flag": 1
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
[
|
||||
{
|
||||
"id": 37,
|
||||
"foodsType": 5,
|
||||
"sportName": "多组合康复操-热身运动",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type5/%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E7%83%AD%E8%BA%AB%E8%BF%90%E5%8A%A8.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/1.1%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E7%83%AD%E8%BA%AB.mp4",
|
||||
"content": "超重人群由于体重较大，BMI较高，所以要避免跑跳类运动，防止膝关节损伤。<br>运动时采用中等强度有氧运动减脂，再加抗阻运动进行塑形和增肌，避免深蹲类型的抗阻运动，减小膝关节负荷。<br>运动时间在30min以上，且要时刻关注自身的主观感觉，进行RPE量表评价，当强度过大、运动状态不佳时，要及时停止运动，预防运动损伤。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 38,
|
||||
"foodsType": 5,
|
||||
"sportName": "多组合康复操-拉伸运动",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type5/%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E6%8B%89%E4%BC%B8%E8%BF%90%E5%8A%A8.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/1.4%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E6%8B%89%E4%BC%B8.mp4",
|
||||
"content": "超重人群由于体重较大，BMI较高，所以要避免跑跳类运动，防止膝关节损伤。<br>运动时采用中等强度有氧运动减脂，再加抗阻运动进行塑形和增肌，避免深蹲类型的抗阻运动，减小膝关节负荷。<br>运动时间在30min以上，且要时刻关注自身的主观感觉，进行RPE量表评价，当强度过大、运动状态不佳时，要及时停止运动，预防运动损伤。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 39,
|
||||
"foodsType": 5,
|
||||
"sportName": "多组合康复操-抗阻运动",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type5/%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E6%8A%97%E9%98%BB%E8%BF%90%E5%8A%A8.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/1.3%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E6%8A%97%E9%98%BB.mp4https://sharkbaby.yhy.ren/3%E5%8A%A0%E5%BC%BA%E6%A0%B8%E5%BF%831.mp4",
|
||||
"content": "超重人群由于体重较大，BMI较高，所以要避免跑跳类运动，防止膝关节损伤。<br>运动时采用中等强度有氧运动减脂，再加抗阻运动进行塑形和增肌，避免深蹲类型的抗阻运动，减小膝关节负荷。<br>运动时间在30min以上，且要时刻关注自身的主观感觉，进行RPE量表评价，当强度过大、运动状态不佳时，要及时停止运动，预防运动损伤。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 40,
|
||||
"foodsType": 5,
|
||||
"sportName": "多组合康复操-有氧运动",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type5/%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E6%9C%89%E6%B0%A7%E8%BF%90%E5%8A%A8.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/1.2%E5%A4%9A%E7%BB%84%E5%90%88%E5%BA%B7%E5%A4%8D%E6%93%8D-%E6%9C%89%E6%B0%A7.mp4",
|
||||
"content": "超重人群由于体重较大，BMI较高，所以要避免跑跳类运动，防止膝关节损伤。<br>运动时采用中等强度有氧运动减脂，再加抗阻运动进行塑形和增肌，避免深蹲类型的抗阻运动，减小膝关节负荷。<br>运动时间在30min以上，且要时刻关注自身的主观感觉，进行RPE量表评价，当强度过大、运动状态不佳时，要及时停止运动，预防运动损伤。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 41,
|
||||
"foodsType": 5,
|
||||
"sportName": "俯卧撑提膝",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type5/%E4%BF%AF%E5%8D%A7%E6%92%91%E6%8F%90%E8%86%9D.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7004-20.mp4",
|
||||
"content": "超重人群由于体重较大，BMI较高，所以要避免跑跳类运动，防止膝关节损伤。<br>运动时采用中等强度有氧运动减脂，再加抗阻运动进行塑形和增肌，避免深蹲类型的抗阻运动，减小膝关节负荷。<br>运动时间在30min以上，且要时刻关注自身的主观感觉，进行RPE量表评价，当强度过大、运动状态不佳时，要及时停止运动，预防运动损伤。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 42,
|
||||
"foodsType": 5,
|
||||
"sportName": "肘撑地前伸",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type5/%E8%82%98%E6%92%91%E5%9C%B0%E5%89%8D%E4%BC%B8.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/t7012-15.mp4",
|
||||
"content": "超重人群由于体重较大，BMI较高，所以要避免跑跳类运动，防止膝关节损伤。<br>运动时采用中等强度有氧运动减脂，再加抗阻运动进行塑形和增肌，避免深蹲类型的抗阻运动，减小膝关节负荷。<br>运动时间在30min以上，且要时刻关注自身的主观感觉，进行RPE量表评价，当强度过大、运动状态不佳时，要及时停止运动，预防运动损伤。",
|
||||
"flag": 1
|
||||
},
|
||||
{
|
||||
"id": 43,
|
||||
"foodsType": 5,
|
||||
"sportName": "俯卧两头起",
|
||||
"imgAddress": "https://sharkbaby.yhy.ren/sportDypImg/type5/%E4%BF%AF%E5%8D%A7%E4%B8%A4%E5%A4%B4%E8%B5%B7.png",
|
||||
"videoAddress": "https://sharkbaby.yhy.ren/f6047-8.m4v",
|
||||
"content": "超重人群由于体重较大，BMI较高，所以要避免跑跳类运动，防止膝关节损伤。<br>运动时采用中等强度有氧运动减脂，再加抗阻运动进行塑形和增肌，避免深蹲类型的抗阻运动，减小膝关节负荷。<br>运动时间在30min以上，且要时刻关注自身的主观感觉，进行RPE量表评价，当强度过大、运动状态不佳时，要及时停止运动，预防运动损伤。",
|
||||
"flag": 1
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 B |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 349 B |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 919 KiB |
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
|
||||
<div v-if="visible">
|
||||
<div class="popup"></div>
|
||||
<div class="custom-alert">
|
||||
<div class="title">答题完成</div>
|
||||
<div class="content">其中答对{{yes}}题，答错{{no}}题</div>
|
||||
<div class="flex">
|
||||
<div class="btn one" @click="again">再次挑战</div>
|
||||
<div class="btn2 two" @click="backTo">回到首页</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
yes: {
|
||||
type: Number,
|
||||
default: '0'
|
||||
},
|
||||
no: {
|
||||
type: Number,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backTo() {
|
||||
this.$emit('close');
|
||||
},
|
||||
again() {
|
||||
this.$emit('again');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 56px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #28312E;
|
||||
line-height: 66px;
|
||||
padding-top: 96px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 405px;
|
||||
height: 60px;
|
||||
font-size: 39px;
|
||||
padding-top: 44px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #8389A1;
|
||||
line-height: 47px;
|
||||
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-alert {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 857px;
|
||||
height: 496px;
|
||||
border-radius: 32px 32px 32px 32px;
|
||||
opacity: 1;
|
||||
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
background-image: url("../assets/tankuangbg.png");
|
||||
background-size: contain;
|
||||
/* 或者 background-size: contain; */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 192px;
|
||||
height: 72px;
|
||||
background: #00558E;
|
||||
border-radius: 16px 16px 16px 16px;
|
||||
opacity: 1;
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
width: 192px;
|
||||
height: 72px;
|
||||
background: rgba(0, 85, 142, 0.1);
|
||||
border-radius: 16px 16px 16px 16px;
|
||||
opacity: 1;
|
||||
margin: 0 16px;
|
||||
|
||||
}
|
||||
|
||||
.one {
|
||||
font-size: 32px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
|
||||
|
||||
}
|
||||
|
||||
.two {
|
||||
font-size: 32px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #00558E;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div v-if="visible">
|
||||
<div class="popup" @click="backTo"></div>
|
||||
<div class="custom-alert">
|
||||
<img src="../assets/fork.png" class="closeBtn" @click="backTo" />
|
||||
<video width="857" height="496" controls :src="video" id="sportVideo"></video>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
video: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backTo() {
|
||||
this.$emit('close');
|
||||
},
|
||||
playChange() {
|
||||
const video = document.querySelector('video')
|
||||
const videos = document.querySelector('#sportVideo')
|
||||
video.play()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.custom-alert {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 857px;
|
||||
height: 496px;
|
||||
border-radius: 32px 32px 32px 32px;
|
||||
opacity: 1;
|
||||
z-index: 11;
|
||||
}
|
||||
.closeBtn{
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
right: -60px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router';
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router, // 使用路由
|
||||
}).$mount('#app')
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// src/router/index.js
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import FoodIndex from '@/views/FoodIndex.vue';
|
||||
import foodSport from '@/views/foodSport.vue';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
// 其他路由配置...
|
||||
|
||||
{
|
||||
path: '/food',
|
||||
name: 'FoodIndex',
|
||||
component: FoodIndex,
|
||||
},{
|
||||
path: '/sport',
|
||||
name: 'foodSport',
|
||||
component: foodSport,
|
||||
},
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,843 @@
|
|||
<template>
|
||||
<div class="contioner">
|
||||
<div class="twoPartIi">
|
||||
<div class="leftTab">
|
||||
<div v-for="(item, index) in selectList" :key="index" :class="['checked', item.hidden ? 'bgShaw' : '']"
|
||||
@click="selectChange(item, index)">
|
||||
<img :src="require('../assets/' + item.imgSrc)" class="imgClass" />
|
||||
<div style="margin-left: 28px; display: inline-block;">
|
||||
<div class="eighteen">{{ item.name }}</div>
|
||||
<div style="font-size: 24px;">{{ item.english }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center home-txt" v-show="showIndex == 0">
|
||||
<div class="twenty">疾病是吃出来的,健康也是吃出来的,</div>
|
||||
<div class="twenty-two">选择很重要!</div>
|
||||
<div class="twenty-three">Disease is something we eat, and health is also something we eat.</div>
|
||||
<div class="twenty-four">Choosing is important!</div>
|
||||
</div>
|
||||
<div class="flex-sub partIi" v-show="showIndex > 0">
|
||||
<div class="leftCenter">
|
||||
<div class="topTag">
|
||||
<img class="topTag-img" src="../assets/boy.png" />
|
||||
<p class="topTag-p">
|
||||
以下六种食物中，最不适合{{ diseaseName }}人群吃的是哪一种
|
||||
</p>
|
||||
</div>
|
||||
<!-- <video controls :src="item.sp" class="selectImg"></video> -->
|
||||
<div class="tabler">
|
||||
<div v-for="(item, index) in showFoodInfos" :key="index" class="option-div"
|
||||
:class="item.checked ? 'option-checked' : ''" @click="checkFlag(item)">
|
||||
<img :src="item.imgAddress" class="selectImg" />
|
||||
<div>{{ item.foodsName }}</div>
|
||||
</div>
|
||||
<div class="themBg" @click="next">下一组 / NEXT</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-sub flex-contioner centerImg">
|
||||
<img src="../assets/error.png" alt="" v-if="answer == 1">
|
||||
<img src="../assets/success.png" alt="" v-if="answer == 0">
|
||||
</div>
|
||||
<div class="flex-sub" style="margin-right: 124px;">
|
||||
<div class="text-center right-title">{{ answerContent }}</div>
|
||||
<div class="project">
|
||||
<div v-if="answerOption != null">
|
||||
<div class="answer-title">
|
||||
<div>{{ answerOption.foodsName }}</div>
|
||||
<div class="title-bottom"></div>
|
||||
</div>
|
||||
|
||||
<div class="nutrient-info" v-if="answerOption.nutrient.length <= 3">
|
||||
<div v-for="(item, index) in answerOption.nutrient" :key="'nutrient' + index">
|
||||
<div class="nutrient-title3">{{ item.nutrientName }}</div>
|
||||
<div>
|
||||
<span class="nutrient-value3">{{ item.nutrientValue }}</span>
|
||||
<span class="nutrient-unit3">{{ item.nutrientUnit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nutrient-info" v-if="answerOption.nutrient.length == 4">
|
||||
<div v-for="(item, index) in answerOption.nutrient" :key="'nutrient' + index">
|
||||
<div class="nutrient-title4">{{ item.nutrientName }}</div>
|
||||
<div>
|
||||
<span class="nutrient-value4">{{ item.nutrientValue }}</span>
|
||||
<span class="nutrient-unit4">{{ item.nutrientUnit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nutrient-info" v-if="answerOption.nutrient.length == 5">
|
||||
<div v-for="(item, index) in answerOption.nutrient" :key="'nutrient' + index">
|
||||
<div class="nutrient-title5">{{ item.nutrientName }}</div>
|
||||
<div>
|
||||
<span class="nutrient-value5">{{ item.nutrientValue }}</span>
|
||||
<span class="nutrient-unit5">{{ item.nutrientUnit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="food-info">{{ answerOption.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Popup :visible="popupVisible" :yes="yesNum" :no="noNum" @close="backTo" @again="again" />
|
||||
|
||||
<div class="right-bottom" @click="reload()">
|
||||
<img src="https://sharkbaby.yhy.ren/sportDypImg/%E8%BF%94%E5%9B%9E%E9%A6%96%E9%A1%B5.png" />
|
||||
<div>返回首页</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="maskStyle" v-if="isMask">
|
||||
<div class="maskbg">
|
||||
<div class="flex-sub" style="margin-right: 124px;">
|
||||
<!-- <div class="text-center right-title">{{ answerContent }}</div> -->
|
||||
<div class="projects" style="color: black;padding: 50px;">
|
||||
<div v-if="answerOptions != null">
|
||||
<div class="answer-title">
|
||||
<div style="color: black;">{{ answerOptions.foodsName }}</div>
|
||||
<div class="title-bottom"></div>
|
||||
</div>
|
||||
|
||||
<div class="nutrient-info" v-if="answerOptions.nutrient.length <= 3">
|
||||
<div v-for="(item, index) in answerOptions.nutrient" :key="'nutrient' + index">
|
||||
<div class="nutrient-title3" style="color: black;">{{ item.nutrientName }}</div>
|
||||
<div>
|
||||
<span class="nutrient-value3" style="color: black;">{{ item.nutrientValue }}</span>
|
||||
<span class="nutrient-unit3" style="color: black;">{{ item.nutrientUnit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nutrient-info" v-if="answerOptions.nutrient.length == 4">
|
||||
<div v-for="(item, index) in answerOptions.nutrient" :key="'nutrient' + index">
|
||||
<div class="nutrient-title4" style="color: black;">{{ item.nutrientName }}</div>
|
||||
<div>
|
||||
<span class="nutrient-value4" style="color: black;">{{ item.nutrientValue }}</span>
|
||||
<span class="nutrient-unit4" style="color: black;">{{ item.nutrientUnit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nutrient-info" v-if="answerOptions.nutrient.length == 5">
|
||||
<div v-for="(item, index) in answerOptions.nutrient" :key="'nutrient' + index">
|
||||
<div class="nutrient-title5" style="color: black;">{{ item.nutrientName }}</div>
|
||||
<div>
|
||||
<span class="nutrient-value5" style="color: black;">{{ item.nutrientValue }}</span>
|
||||
<span class="nutrient-unit5" style="color: black;">{{ item.nutrientUnit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="food-info" style="color: black;">{{ answerOptions.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="closeStyle" @click="handleClose"><img src="../assets/delect.png" /> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Popup from '../components/Popup.vue';
|
||||
export default {
|
||||
name: 'FoodIndex',
|
||||
components: {
|
||||
Popup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
//弹框控制
|
||||
popupVisible: false,
|
||||
yesNum: 0,
|
||||
noNum: 0,
|
||||
selectList: [{
|
||||
name: '高血糖',
|
||||
id: 1,
|
||||
imgSrc: 'gaoxuetang.png',
|
||||
english: 'HYPERGLYCEMIA',
|
||||
hidden: false
|
||||
}, {
|
||||
name: '高血压',
|
||||
id: 2,
|
||||
imgSrc: 'gaoxueya.png',
|
||||
english: 'HYPERTENSION',
|
||||
hidden: false
|
||||
}, {
|
||||
name: '高血脂',
|
||||
id: 3,
|
||||
imgSrc: 'gaoxuezhi.png',
|
||||
english: 'HYPERLIPEMIA',
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: '高尿酸',
|
||||
id: 4,
|
||||
imgSrc: 'gaoniaosuan.png',
|
||||
english: 'HYPERURICEMIA',
|
||||
hidden: false
|
||||
}, {
|
||||
name: '肥胖',
|
||||
id: 5,
|
||||
imgSrc: 'feipang.png',
|
||||
english: 'OBESITY',
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
//当前显示状态
|
||||
showIndex: 0,
|
||||
//显示的食物数组
|
||||
showFoodInfos: [],
|
||||
//查询的食物集合
|
||||
foods: [],
|
||||
//当前组数
|
||||
groupIndex: 0,
|
||||
//0错 1对 3未选
|
||||
answer: 3,
|
||||
answerContent: '请选择菜品答题吧！',
|
||||
answerOption: null,
|
||||
answerOptions: null,
|
||||
diseaseName: '',
|
||||
isMask:false,
|
||||
selectif:false
|
||||
}
|
||||
},
|
||||
created () { },
|
||||
methods: {
|
||||
handleClose(){
|
||||
this.isMask = false
|
||||
},
|
||||
reload () {
|
||||
if (this.showIndex > 0) {
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
checkFlag (item) {
|
||||
console.log('item', item);
|
||||
this.answerOptions = item
|
||||
if (this.answer != 3) {
|
||||
this.isMask = true
|
||||
return
|
||||
}
|
||||
if (item.flag != 0) {
|
||||
this.answerContent = '很遗憾，答错了！'
|
||||
this.noNum++
|
||||
} else {
|
||||
this.answerContent = '恭喜您，答对了！'
|
||||
this.yesNum++
|
||||
}
|
||||
item.checked = true
|
||||
this.selectif = true
|
||||
this.answer = item.flag
|
||||
this.answerOption = item
|
||||
},
|
||||
reset () {
|
||||
this.answerContent = ''
|
||||
this.yesNum = 0
|
||||
this.noNum = 0
|
||||
this.answer = 3
|
||||
this.answerOption = null
|
||||
},
|
||||
// 选择事件
|
||||
selectChange (item, index) {
|
||||
this.showIndex = index + 1;
|
||||
this.diseaseName = item.name
|
||||
this.getFoodData()
|
||||
this.reset()
|
||||
this.selectList.map((item2, index2) => {
|
||||
if (index == index2) {
|
||||
this.$set(item2, "hidden", true)
|
||||
} else {
|
||||
this.$set(item2, "hidden", false)
|
||||
}
|
||||
})
|
||||
},
|
||||
getFoodData () {
|
||||
this.groupIndex = 0
|
||||
axios.get(`/daiyu/static/food/food${this.showIndex}.json`).then(result => {
|
||||
console.log('getFoodData', result.data)
|
||||
result.data.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
this.foods = result.data
|
||||
this.getShowFoods()
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
//点击下一组
|
||||
next () {
|
||||
if (this.answer == 3) {
|
||||
alert("请选择菜品答题吧！")
|
||||
return
|
||||
}
|
||||
this.updateStatus()
|
||||
this.groupIndex += 1;
|
||||
if (this.groupIndex >= 2) {
|
||||
//已经第二组
|
||||
this.popupVisible = true;
|
||||
return;
|
||||
}
|
||||
this.getShowFoods()
|
||||
|
||||
},
|
||||
|
||||
updateStatus () {
|
||||
this.answerContent = '请选择菜品答题吧！'
|
||||
this.answer = 3
|
||||
this.answerOption = null
|
||||
},
|
||||
again () {
|
||||
console.log("继续")
|
||||
this.popupVisible = false;
|
||||
this.yesNum = 0
|
||||
this.noNum = 0
|
||||
this.updateStatus()
|
||||
this.getFoodData()
|
||||
},
|
||||
backTo () {
|
||||
console.log("到首页")
|
||||
this.popupVisible = false;
|
||||
this.showIndex = 0
|
||||
this.yesNum = 0
|
||||
this.noNum = 0
|
||||
this.updateStatus()
|
||||
this.selectList.map((item2, index2) => {
|
||||
this.$set(item2, "hidden", false)
|
||||
})
|
||||
},
|
||||
//获取显示的食物集合
|
||||
getShowFoods () {
|
||||
var showFood = []
|
||||
|
||||
var notFood = this.foods.filter(o => !o.flag);
|
||||
var yesFood = this.foods.filter(o => o.flag);
|
||||
console.log("不可食", notFood)
|
||||
console.log("可食", yesFood)
|
||||
|
||||
|
||||
var randomNot = this.getRandomArrayElements(notFood, 1);
|
||||
var randomYes = this.getRandomArrayElements(yesFood, 5);
|
||||
console.log("随机不可食", randomNot)
|
||||
console.log("随机可食", randomYes)
|
||||
|
||||
//设置显示
|
||||
|
||||
randomNot.forEach((item) => {
|
||||
showFood.push(item);
|
||||
this.foods.forEach((item2, index2) => {
|
||||
if (item.id == item2.id) {
|
||||
this.foods.splice(index2, 1);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
randomYes.forEach((item) => {
|
||||
showFood.push(item);
|
||||
this.foods.forEach((item2, index2) => {
|
||||
if (item.id == item2.id) {
|
||||
this.foods.splice(index2, 1);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
this.showFoodInfos = this.shuffle(showFood)
|
||||
console.log(this.showFoodInfos);
|
||||
},
|
||||
//数组打乱
|
||||
shuffle (arr) {
|
||||
return arr.sort(() => Math.random() - 0.5);
|
||||
},
|
||||
/* 随机获取数组中的数据*/
|
||||
getRandomArrayElements (arr, count) {
|
||||
var shuffled = arr.slice(0),
|
||||
i = arr.length,
|
||||
min = i - count,
|
||||
temp, index;
|
||||
while (i-- > min) {
|
||||
index = Math.floor((i + 1) * Math.random());
|
||||
temp = shuffled[index];
|
||||
shuffled[index] = shuffled[i];
|
||||
shuffled[i] = temp;
|
||||
}
|
||||
return shuffled.slice(min);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.maskStyle {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 2;
|
||||
|
||||
}
|
||||
.closeStyle{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: auto; position: absolute; top: -850px; left: 1100px; right: 0; bottom: 0;
|
||||
}
|
||||
.maskbg {
|
||||
width: 1070px;
|
||||
height: 868px;
|
||||
background: url('../assets/Group.png');
|
||||
/* position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%,-50%); */
|
||||
margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.right-bottom {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
bottom: 110px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
color: #00558E;
|
||||
|
||||
}
|
||||
|
||||
.right-bottom img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.right-bottom div {
|
||||
padding-top: 25px;
|
||||
width: 80px;
|
||||
height: 27px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #00558E;
|
||||
line-height: 21px;
|
||||
text-align: justified;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.twenty {
|
||||
height: 222px;
|
||||
font-size: 148px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #00558E;
|
||||
line-height: 222px;
|
||||
}
|
||||
|
||||
.twenty-two {
|
||||
height: 282px;
|
||||
font-size: 188px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #F15A24;
|
||||
line-height: 282px;
|
||||
letter-spacing: 45px;
|
||||
}
|
||||
|
||||
.twenty-three {
|
||||
margin-top: 24px;
|
||||
height: 69px;
|
||||
font-size: 60px;
|
||||
font-family: Arial, Arial;
|
||||
font-weight: 400;
|
||||
color: #00558E;
|
||||
line-height: 69px;
|
||||
}
|
||||
|
||||
.twenty-four {
|
||||
margin-top: 8px;
|
||||
height: 83px;
|
||||
font-size: 72px;
|
||||
font-family: Arial, Arial;
|
||||
font-weight: bold;
|
||||
color: #F15A24;
|
||||
line-height: 83px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-txt {
|
||||
flex: 1;
|
||||
margin-top: 192px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.flex-contioner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.partIi {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.twoPartIi {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contioner {
|
||||
width: 3840px;
|
||||
height: 1080px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
background-image: url("../assets/bgimg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.leftCenter {
|
||||
margin-top: 74px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checked {
|
||||
width: 392px;
|
||||
height: 118px;
|
||||
margin-top: calc((1080px - 118px * 5)/6);
|
||||
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 59px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bgShaw {
|
||||
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.imgClass {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
}
|
||||
|
||||
.eighteen {
|
||||
height: 72px;
|
||||
font-size: 48px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 56px;
|
||||
|
||||
}
|
||||
|
||||
.leftTab {
|
||||
padding-left: 82px;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
|
||||
.topTag {
|
||||
margin-left: 212px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 48px;
|
||||
border: 2px solid #FFFFFF;
|
||||
opacity: 1;
|
||||
width: 1514px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topTag-img {
|
||||
margin-left: 212px;
|
||||
}
|
||||
|
||||
.topTag-p {
|
||||
margin-left: 48px;
|
||||
width: 754px;
|
||||
height: 87px;
|
||||
font-size: 32px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 600;
|
||||
color: #00558E;
|
||||
line-height: 87px;
|
||||
}
|
||||
|
||||
.tabler {
|
||||
--width: 1570px;
|
||||
margin-top: 54px;
|
||||
margin-left: 184px;
|
||||
width: var(--width);
|
||||
height: 720px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 54px;
|
||||
opacity: 1;
|
||||
border: 2px solid #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.option-div {
|
||||
float: left;
|
||||
width: 442px;
|
||||
margin: 61px calc((var(--width) - 442px * 3)/6) 0;
|
||||
height: 212px;
|
||||
border-radius: 32px;
|
||||
opacity: 1;
|
||||
border: 3px solid #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.option-div div {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
font-size: 36px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.option-checked {
|
||||
border: 3px solid #00558E !important;
|
||||
}
|
||||
|
||||
.option-checked::before {
|
||||
content: '';
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #00558E;
|
||||
border-radius: 32px 0px 26px 0px;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.option-checked::after {
|
||||
content: '';
|
||||
background-image: url(../assets/gou.png);
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
.selectImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.themBg {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 44px;
|
||||
|
||||
width: 432px;
|
||||
height: 82px;
|
||||
line-height: 82px;
|
||||
background: #00558E;
|
||||
text-align: center;
|
||||
border-radius: 41px;
|
||||
opacity: 1;
|
||||
border: 1px solid #FFFFFF;
|
||||
font-size: 44px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.centerImg {
|
||||
width: 338px;
|
||||
height: 338px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-title {
|
||||
height: 64px;
|
||||
font-size: 64px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #00558E;
|
||||
line-height: 60px;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
.project {
|
||||
position: relative;
|
||||
width: 862px;
|
||||
height: 720px;
|
||||
background-image: url(../assets/group8.png);
|
||||
border-radius: 32px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.flex-sub {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.answer-title {
|
||||
display: inline-block;
|
||||
margin-left: 36px;
|
||||
margin-top: 24px;
|
||||
height: 90px;
|
||||
font-size: 60px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 85px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.answer-title :nth-child(1) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.title-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 11px;
|
||||
height: 14px;
|
||||
background: #F15A24;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.nutrient-info {
|
||||
margin: 8px 36px 0;
|
||||
width: calc(100% - 36px - 166px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 130px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px #FFFFFF dotted;
|
||||
}
|
||||
|
||||
.nutrient-title3 {
|
||||
height: 54px;
|
||||
font-size: 36px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
.nutrient-value3 {
|
||||
height: 49px;
|
||||
font-size: 36px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.nutrient-unit3 {
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.nutrient-title4 {
|
||||
height: 54px;
|
||||
font-size: 30px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
.nutrient-value4 {
|
||||
height: 49px;
|
||||
font-size: 30px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.nutrient-unit4 {
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.nutrient-title5 {
|
||||
height: 54px;
|
||||
font-size: 25px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
.nutrient-value5 {
|
||||
height: 49px;
|
||||
font-size: 25px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.nutrient-unit5 {
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.food-info {
|
||||
margin: 24px 36px 0;
|
||||
width: 790px;
|
||||
height: 420px;
|
||||
font-size: 25px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,690 @@
|
|||
<template>
|
||||
<div class="contioner">
|
||||
<div class="twoPartIi">
|
||||
<div class="leftTab">
|
||||
<div v-for="(item,index) in selectList" :key="index" :class="['checked',item.hidden?'bgShaw':'']"
|
||||
@click="selectChange(item,index)">
|
||||
<img :src="require('../assets/'+item.imgSrc)" class="imgClass" />
|
||||
<div style="margin-left: 28px; display: inline-block;">
|
||||
<div class="eighteen">{{item.name}}</div>
|
||||
<div style="font-size: 24px;">{{item.english}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center home-txt" v-show="showIndex==0">
|
||||
<div class="twenty">与运动相约，与健康同行，与快乐长伴,</div>
|
||||
<div class="twenty-two">适量很重要!</div>
|
||||
<div class="twenty-three">Meet with sports, walk with health, and be happy for a long time,</div>
|
||||
<div class="twenty-four">Moderate is important!</div>
|
||||
</div>
|
||||
<div class="flex-sub partIi" v-show="showIndex>0">
|
||||
<div class="leftCenter">
|
||||
<div class="topTag">
|
||||
<img src="../assets/boy.png" />
|
||||
<p class="topTag-p">
|
||||
适合{{diseaseName}}的运动
|
||||
</p>
|
||||
</div>
|
||||
<div class="tabler">
|
||||
<div v-for="(item,index) in showFoodInfos" :key="index" class="option-div"
|
||||
@click="checkFlag(item)">
|
||||
<img :src="item.imgAddress" class="selectImg" />
|
||||
<div class="option-title">{{item.sportName}}</div>
|
||||
<img src="../assets/play.png" class="playImg">
|
||||
</div>
|
||||
<div class="themBg" @click="next">下一页</div>
|
||||
<div class="themBgs" @click="upnext">上一页</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-sub" style="margin-right: 124px;display: flex;justify-content: flex-end;">
|
||||
<div>
|
||||
<div class="text-center right-title">{{answerContent}}</div>
|
||||
<div class="project">
|
||||
<div class="answer-title">
|
||||
<div>{{sportName}}</div>
|
||||
<div class="title-bottom"></div>
|
||||
</div>
|
||||
<div class="food-info" v-html="sportContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<sport-popup :visible="popupVisible" @close="backTo" ref="sportRef" />
|
||||
|
||||
<div class="right-bottom" @click="reload()">
|
||||
<img src="https://sharkbaby.yhy.ren/sportDypImg/%E8%BF%94%E5%9B%9E%E9%A6%96%E9%A1%B5.png"/>
|
||||
<div>返回首页</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import sportPopup from '../components/sportPopup.vue';
|
||||
export default {
|
||||
name: 'FoodIndex',
|
||||
components: {
|
||||
sportPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//弹框控制
|
||||
popupVisible: false,
|
||||
noNum: 0,
|
||||
selectList: [{
|
||||
name: '高血糖',
|
||||
id: 1,
|
||||
imgSrc: 'gaoxuetang.png',
|
||||
english: 'HYPERGLYCEMIA',
|
||||
hidden: false
|
||||
}, {
|
||||
name: '高血压',
|
||||
id: 2,
|
||||
imgSrc: 'gaoxueya.png',
|
||||
english: 'HYPERTENSION',
|
||||
hidden: false
|
||||
}, {
|
||||
name: '高血脂',
|
||||
id: 3,
|
||||
imgSrc: 'gaoxuezhi.png',
|
||||
english: 'HYPERLIPEMIA',
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: '高尿酸',
|
||||
id: 4,
|
||||
imgSrc: 'gaoniaosuan.png',
|
||||
english: 'HYPERURICEMIA',
|
||||
hidden: false
|
||||
}, {
|
||||
name: '肥胖',
|
||||
id: 5,
|
||||
imgSrc: 'feipang.png',
|
||||
english: 'OBESITY',
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
//当前显示状态
|
||||
showIndex: 0,
|
||||
//显示的食物数组
|
||||
showFoodInfos: [],
|
||||
//查询的食物集合
|
||||
foods: [],
|
||||
//当前组数
|
||||
groupIndex: 0,
|
||||
//0错 1对 3未选
|
||||
answer: 3,
|
||||
answerContent: '',
|
||||
sportContent: '',
|
||||
sportName: '',
|
||||
answerOption: null,
|
||||
diseaseName: '',
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
reload(){
|
||||
if(this.showIndex>0){
|
||||
location.reload()
|
||||
}
|
||||
},
|
||||
checkFlag(item) {
|
||||
this.popupVisible = true;
|
||||
this.$refs.sportRef.video = item.videoAddress;
|
||||
this.sportContent = item.content
|
||||
this.sportName = item.sportName
|
||||
this.$nextTick(() => {
|
||||
this.$refs.sportRef.playChange()
|
||||
})
|
||||
// console.log(item,'item')
|
||||
// this.answerOption = item
|
||||
},
|
||||
// 选择事件
|
||||
selectChange(item, index) {
|
||||
this.showIndex = index + 1;
|
||||
this.diseaseName = item.name
|
||||
this.sportContent = ''
|
||||
this.sportName = ''
|
||||
this.getFoodData()
|
||||
this.selectList.map((item2, index2) => {
|
||||
if (index == index2) {
|
||||
this.$set(item2, "hidden", true)
|
||||
} else {
|
||||
this.$set(item2, "hidden", false)
|
||||
}
|
||||
})
|
||||
},
|
||||
getFoodData() {
|
||||
this.groupIndex = 0
|
||||
|
||||
|
||||
axios.get(`/daiyu/static/sport/sport${this.showIndex}.json`).then(result => {
|
||||
console.log('getFoodData', result.data)
|
||||
result.data.map(item => {
|
||||
item.checked = false
|
||||
})
|
||||
this.foods = result.data
|
||||
this.getShowFoods()
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
//点击下一组
|
||||
next() {
|
||||
this.updateStatus()
|
||||
|
||||
console.log(this.groupIndex)
|
||||
if (this.groupIndex >= 1) {
|
||||
//已经第二组
|
||||
//this.popupVisible = true;
|
||||
return;
|
||||
}
|
||||
this.groupIndex += 1;
|
||||
this.getShowFoods()
|
||||
},
|
||||
upnext(){
|
||||
console.log(this.groupIndex);
|
||||
if (this.groupIndex == 0) {
|
||||
return
|
||||
}
|
||||
this.groupIndex -= 1;
|
||||
this.selectChange(this.selectList[this.showIndex-1],this.showIndex-1)
|
||||
},
|
||||
|
||||
|
||||
updateStatus() {
|
||||
this.answerContent = '请选择运动答题吧！'
|
||||
this.answer = 3
|
||||
this.answerOption = null
|
||||
},
|
||||
backTo() {
|
||||
this.popupVisible = false;
|
||||
},
|
||||
//获取显示的食物集合
|
||||
getShowFoods() {
|
||||
var showFood = []
|
||||
|
||||
var yesFood = this.foods.filter(o => o.flag);
|
||||
console.log("可食", yesFood)
|
||||
|
||||
|
||||
var randomYes = this.getRandomArrayElements(yesFood, 6);
|
||||
console.log("随机可食", randomYes)
|
||||
|
||||
//设置显示
|
||||
randomYes.forEach((item) => {
|
||||
showFood.push(item);
|
||||
this.foods.forEach((item2, index2) => {
|
||||
if (item.id == item2.id) {
|
||||
this.foods.splice(index2, 1);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.showFoodInfos = this.shuffle(showFood)
|
||||
|
||||
},
|
||||
//数组打乱
|
||||
shuffle(arr) {
|
||||
return arr.sort(() => Math.random() - 0.5);
|
||||
},
|
||||
/* 随机获取数组中的数据*/
|
||||
getRandomArrayElements(arr, count) {
|
||||
if (arr.length < count) {
|
||||
count = arr.length
|
||||
}
|
||||
var shuffled = arr.slice(0),
|
||||
i = arr.length,
|
||||
min = i - count,
|
||||
temp, index;
|
||||
while (i-- > min) {
|
||||
index = Math.floor((i + 1) * Math.random());
|
||||
temp = shuffled[index];
|
||||
shuffled[index] = shuffled[i];
|
||||
shuffled[i] = temp;
|
||||
}
|
||||
return shuffled.slice(min);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.right-bottom {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
bottom: 110px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
color: #00558E;
|
||||
|
||||
}
|
||||
.right-bottom img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.right-bottom div{
|
||||
padding-top: 25px;
|
||||
width: 80px;
|
||||
height: 27px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #00558E;
|
||||
line-height: 21px;
|
||||
text-align: justified;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.twenty {
|
||||
height: 222px;
|
||||
font-size: 148px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #00558E;
|
||||
line-height: 222px;
|
||||
}
|
||||
|
||||
.twenty-two {
|
||||
height: 282px;
|
||||
font-size: 188px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #F15A24;
|
||||
line-height: 282px;
|
||||
letter-spacing: 45px;
|
||||
}
|
||||
|
||||
.twenty-three {
|
||||
margin-top: 24px;
|
||||
height: 69px;
|
||||
font-size: 60px;
|
||||
font-family: Arial, Arial;
|
||||
font-weight: 400;
|
||||
color: #00558E;
|
||||
line-height: 69px;
|
||||
}
|
||||
|
||||
.twenty-four {
|
||||
margin-top: 8px;
|
||||
height: 83px;
|
||||
font-size: 72px;
|
||||
font-family: Arial, Arial;
|
||||
font-weight: bold;
|
||||
color: #F15A24;
|
||||
line-height: 83px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-txt {
|
||||
flex: 1;
|
||||
margin-top: 192px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.flex-contioner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.partIi {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.twoPartIi {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contioner {
|
||||
width: 3840px;
|
||||
height: 1080px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
background-image: url("../assets/bgimg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.leftCenter {
|
||||
margin-top: 74px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checked {
|
||||
width: 392px;
|
||||
height: 118px;
|
||||
margin-top: calc((1080px - 118px * 5)/6);
|
||||
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 59px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bgShaw {
|
||||
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.imgClass {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
}
|
||||
|
||||
.eighteen {
|
||||
height: 72px;
|
||||
font-size: 48px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
line-height: 56px;
|
||||
|
||||
}
|
||||
|
||||
.leftTab {
|
||||
padding-left: 82px;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
|
||||
.topTag {
|
||||
margin-left: 212px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 48px;
|
||||
border: 2px solid #FFFFFF;
|
||||
opacity: 1;
|
||||
width: 1514px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topTag-p {
|
||||
margin-left: 48px;
|
||||
height: 87px;
|
||||
font-size: 58px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #00558E;
|
||||
line-height: 87px;
|
||||
}
|
||||
|
||||
.tabler {
|
||||
--width: 1570px;
|
||||
margin-top: 54px;
|
||||
margin-left: 184px;
|
||||
width: var(--width);
|
||||
height: 720px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 54px;
|
||||
opacity: 1;
|
||||
border: 2px solid #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.option-div {
|
||||
float: left;
|
||||
width: 442px;
|
||||
margin: 61px calc((var(--width) - 442px * 3)/6) 0;
|
||||
height: 212px;
|
||||
border-radius: 32px;
|
||||
opacity: 1;
|
||||
border: 3px solid #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
/* background-color: rgba(0, 0, 0, 0.3); */
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
font-size: 30px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 0 0 28px 28px;
|
||||
}
|
||||
|
||||
.playImg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 63px;
|
||||
height: 63px;
|
||||
}
|
||||
|
||||
.selectImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.themBg {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 44px;
|
||||
|
||||
width: 432px;
|
||||
height: 82px;
|
||||
line-height: 82px;
|
||||
background: #00558E;
|
||||
text-align: center;
|
||||
border-radius: 41px;
|
||||
opacity: 1;
|
||||
border: 1px solid #FFFFFF;
|
||||
font-size: 44px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.themBgs {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 500px;
|
||||
|
||||
width: 432px;
|
||||
height: 82px;
|
||||
line-height: 82px;
|
||||
background: #00558E;
|
||||
text-align: center;
|
||||
border-radius: 41px;
|
||||
opacity: 1;
|
||||
border: 1px solid #FFFFFF;
|
||||
font-size: 44px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.centerImg {
|
||||
width: 338px;
|
||||
height: 338px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-title {
|
||||
height: 64px;
|
||||
font-size: 64px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #00558E;
|
||||
line-height: 60px;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
.project {
|
||||
position: relative;
|
||||
width: 862px;
|
||||
height: 720px;
|
||||
background-image: url(../assets/group8.png);
|
||||
border-radius: 32px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.flex-sub {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.answer-title {
|
||||
display: inline-block;
|
||||
margin-left: 36px;
|
||||
margin-top: 44px;
|
||||
height: 90px;
|
||||
font-size: 60px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 85px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.answer-title :nth-child(1) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.title-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 11px;
|
||||
height: 14px;
|
||||
background: #F15A24;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.nutrient-info {
|
||||
margin: 8px 36px 0;
|
||||
width: calc(100% - 36px - 166px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 130px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px #FFFFFF dotted;
|
||||
}
|
||||
|
||||
.nutrient-title3 {
|
||||
height: 54px;
|
||||
font-size: 36px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
.nutrient-value3 {
|
||||
height: 49px;
|
||||
font-size: 36px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.nutrient-unit3 {
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.nutrient-title4 {
|
||||
height: 54px;
|
||||
font-size: 30px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
.nutrient-value4 {
|
||||
height: 49px;
|
||||
font-size: 30px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.nutrient-unit4 {
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.nutrient-title5 {
|
||||
height: 54px;
|
||||
font-size: 25px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
.nutrient-value5 {
|
||||
height: 49px;
|
||||
font-size: 25px;
|
||||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.nutrient-unit5 {
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.food-info {
|
||||
margin: 24px 36px 0;
|
||||
width: 790px;
|
||||
height: 420px;
|
||||
font-size: 32px;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
module.exports = {
|
||||
publicPath: './',
|
||||
assetsDir: 'public'
|
||||
/* devServer: {
|
||||
port: 8080, // 端口号，如果端口号被占用，会自动加1
|
||||
host: '0.0.0.0', // 主机名， 127.0.0.1， 真机 0.0.0.0
|
||||
https: false, //协议
|
||||
open: false, //启动服务时自动打开浏览器访问
|
||||
disableHostCheck: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: "http://localhost:8080",
|
||||
pathRewrite: {
|
||||
"^/api": "/dyp-vue/static"
|
||||
}
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
Loading…
Reference in New Issue