TopicPage

project.config.json

@@ -1,81 +1,112 @@
 {
-  "miniprogramRoot": "dist/",
-  "projectname": "agent-auth-react",
-  "description": "",
-  "appid": "wxe57e116e4fe55532",
-  "setting": {
-    "urlCheck": true,
-    "es6": false,
-    "enhance": false,
-    "postcss": false,
-    "preloadBackgroundData": false,
-    "minified": false,
-    "newFeature": true,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": false,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
-    },
-    "enableEngineNative": false,
-    "bundle": false,
-    "useIsolateContext": true,
-    "useCompilerModule": false,
-    "userConfirmedUseCompilerModuleSwitch": false,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true
-  },
-  "compileType": "miniprogram",
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "compilerOptions": {
-    "paths": {
-      "@": [
-        "./src"
-      ],
-      "@/assets": [
-        "src/assets"
-      ]
-    }
-  },
-  "condition": {
-    "plugin": {
-      "list": []
-    },
-    "game": {
-      "list": []
-    },
-    "gamePlugin": {
-      "list": []
-    },
-    "miniprogram": {
-      "list": [
-        {
-          "name": "pages/Entrance/index",
-          "pathName": "pages/Entrance/index",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "pages/My/index",
-          "pathName": "pages/My/index",
-          "scene": null
-        }
-      ]
-    }
-  }
+	"miniprogramRoot": "dist/",
+	"projectname": "agent-auth-react",
+	"description": "",
+	"appid": "wxe57e116e4fe55532",
+	"setting": {
+		"urlCheck": false,
+		"es6": true,
+		"enhance": false,
+		"postcss": false,
+		"preloadBackgroundData": false,
+		"minified": true,
+		"newFeature": true,
+		"coverView": true,
+		"nodeModules": false,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": false,
+		"scopeDataCheck": false,
+		"uglifyFileName": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"compileHotReLoad": false,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"bundle": false,
+		"useIsolateContext": true,
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false,
+		"useMultiFrameRuntime": true,
+		"useApiHook": true,
+		"useApiHostProcess": true,
+		"enableEngineNative": false,
+		"userConfirmedBundleSwitch": false,
+		"packNpmManually": false,
+		"packNpmRelationList": [],
+		"minifyWXSS": true
+	},
+	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"compilerOptions": {
+		"paths": {
+			"@": [
+				"./src"
+			],
+			"@/assets": [
+				"src/assets"
+			]
+		}
+	},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"list": []
+		},
+		"game": {
+			"list": []
+		},
+		"gamePlugin": {
+			"list": []
+		},
+		"miniprogram": {
+			"list": [
+				{
+					"id": -1,
+					"name": "pages/Entrance/index",
+					"pathName": "pages/Entrance/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "pages/My/index",
+					"pathName": "pages/My/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "pages/Report/index",
+					"pathName": "pages/Report/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "pages/TopicPage/index",
+					"pathName": "pages/TopicPage/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "pages/Rank/index",
+					"pathName": "pages/Rank/index",
+					"scene": null
+				}
+			]
+		}
+	}
 }

src/api/Rank.ts

@@ -0,0 +1,10 @@
+import { request } from '../service/request'
+
+
+export const getRank = () => {
+    return request({
+        url: '/gamecontest/location'
+    })
+}
+
+

src/app.config.ts

@@ -3,6 +3,9 @@ export default {
     'pages/index/index',
     'pages/Entrance/index',
     'pages/My/index',
+    'pages/Report/index',
+    'pages/TopicPage/index',
+    'pages/Rank/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/pages/Rank/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+    navigationStyle: 'custom'
+}

src/pages/Rank/index.scss

@@ -0,0 +1,314 @@
+.Rank {
+    overflow: hidden;
+    width: 100vw;
+    min-height: 100vh;
+    background-color: rgba(52, 226, 50, 1);
+    font-family: PingFangSC-Medium, PingFang SC;
+    .rankbg {
+        width: 100vw;
+        height: 488px;
+        display: block;
+        margin-top: -55px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        z-index: 1;
+    }
+}
+
+
+.header {
+    color: #ffffff;
+    margin: 0 auto;
+    margin-top: 96px;
+    position: relative;
+    z-index: 3;
+    .header-tip {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        .big {
+            font-size: 36px;
+            margin-bottom: 10px;
+        }
+        .small {
+            font-size: 24px;
+        }
+    }
+ }
+
+ 
+
+ .top-three {
+    margin: 0 auto;
+    margin-top: 60px;
+    position: relative;
+    z-index: 4;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    .top-bg {
+        width: 690rpx;
+        height: 356rpx;
+        margin: 0 auto;
+    }
+    
+
+    .unify-Count {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .unify-Count-img {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
+        .num {
+            position: relative;
+            z-index: 1;
+            font-size: 24px;
+            font-weight: 500;
+            color: #FFFFFF;
+        }
+    }
+  
+    .unify-city-name {
+        font-size: 26px;
+        font-weight: 500;
+        color: #FB6D7E;
+    }
+
+    .second {
+        width: 226px;
+        height: 308px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        top: 42px;
+        left: 36px;
+        .Ava {
+            width: 96px;
+            height: 96px;
+            border-radius: 50%;
+            position: absolute;
+            top: 60px;
+            left: 64px;
+            border: 4px solid rgb(181, 212, 249);
+            box-sizing: border-box;
+        }
+        .Count {
+            width: 128px;
+            height: 38px;
+            .Count-img {
+                width: 100%;
+                height: 100%;
+            }
+
+        }
+        .Top {
+            width: 61px;
+            height: 42px;
+            position: absolute;
+            top: 36px;
+            left: 82px;
+        }
+        .Bottom {
+            width: 168px;
+            height: 60px;
+            position: absolute;
+            top: 126px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .city-name {
+           
+            position: absolute;
+            bottom: 72px;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    .first {
+        width: 244px;
+        height: 346px;
+        position: absolute;
+        left: 252px;
+        .first-bg {
+            position: absolute;
+            top: 67px;
+            left: 54%;
+            width: 185px;
+            height: 120px;
+            transform: translateX(-50%);
+        }
+        .Ava {
+            width: 108px;
+            height: 108px;
+            border-radius: 50%;
+            box-sizing: border-box;
+            position: absolute;
+            top: 72px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .Count {
+            width: 130px;
+            height: 40px;
+            .Count-img {
+                width: 100%;
+                height: 100%;
+            }
+            .num {
+
+            }
+        }
+        .Top {
+            width: 76.2px;
+            height: 52.8px;
+            position: absolute;
+            top: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .Bottom {
+            width: 168px;
+            height: 60px;
+            position: absolute;
+            top: 146px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .city-name {
+            position: absolute;
+            left: 50%;
+            bottom: 96px;
+            transform: translateX(-50%);
+        }
+    }
+
+    .thirdly {
+        width: 226px;
+        height: 286px;
+        position: absolute;
+        right: 32px;
+        top: 64px;
+        .Ava {
+            width: 96px;
+            height: 96px;
+            border-radius: 50%;
+            border: 4px solid rgb(239, 210, 174);
+            position: absolute;
+            top: 58px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .Count {
+            width: 128px;
+            height: 38px;
+            .Count-img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .Top {
+            width: 61px;
+            height: 42px;
+            position: absolute;
+            top: 22px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .Bottom {
+            width: 168px;
+            height: 60px;
+            position: absolute;
+            top: 124px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .city-name {
+            position: absolute;
+            bottom: 52px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+}
+
+.green-shade {
+    width: 97%;
+    height: 54px;
+    background:rgba(133,220,132,0.37);;
+    position: absolute;
+    left: 50%;
+    bottom: 0px;
+    transform: translateX(-50%);
+    z-index: 0;
+}
+
+
+.rank-content {
+    background-color: #fff;
+    border-radius: 18rpx;
+    width: 680rpx;
+    padding:  0 42rpx;
+    box-sizing: border-box;
+    margin: 0 auto;
+
+    .rank-content-item {
+        height: 144rpx;
+        display: flex;
+        align-items: center;
+        .ranking {
+            color: #ABB4C1;
+            font-size: 36rpx;
+            margin-right: 32rpx;
+            width: 60rpx;
+            text-align: center;
+            
+        }
+        .city-ava {
+            margin-right: 30rpx;
+            image {
+                width: 82rpx;
+                height: 82rpx;
+                border-radius: 50%;
+            }
+        }
+        .city-info {
+            .city-name {
+               color: #000;
+                font-size: 30rpx;
+                font-weight: bold;
+            }
+            .city-hot {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-left: -20rpx;
+                image {
+                    width: 40rpx;
+                    height: 46rpx;
+                    margin-right: 16rpx;
+                }
+                .hot-num {
+                    margin-top: 20rpx;
+                    font-size: 26rpx;
+                    color: #ABB4C1;
+                    text {
+                        color: #000;
+                        margin-left: 12rpx;
+                    }
+                }
+            }
+        }
+    }
+}

src/pages/Rank/index.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from 'react'
+
+import { View, Image, Text } from "@tarojs/components";
+
+import { getRank } from "../../api/Rank";
+
+import './index.scss'
+
+
+
+const imgUrl =  [
+    {
+        count: 'http://res.training.luojigou.vip/Fmijl8dAfngLORY1_wQHupkK6O1H',
+        top: 'http://res.training.luojigou.vip/FosT3op3qAbtb_AHStAch2Ioi7pD',
+        bottom: 'http://res.training.luojigou.vip/FntpZcGDIsZsYYkgosM6s9sBQTDn'
+    },
+    {
+        count: 'http://res.training.luojigou.vip/FvmR-7IPqXwNtI4REBYNmlSecA8D',
+        top: 'http://res.training.luojigou.vip/Fldl2pRZblLQVdztOhlODPEhhlQF',
+        bottom: 'http://res.training.luojigou.vip/FnPemTe4MKzHzofwZx3cB77dLM3z'
+    },
+    {
+        count: 'http://res.training.luojigou.vip/FnXFslAE0LXmxtlTYWdeGzPU9Qxb',
+        top: 'http://res.training.luojigou.vip/FvKskKpeDP68TBe0cg15LY7Zom13',
+        bottom: 'http://res.training.luojigou.vip/FieXA8zqeIevUgQlhy5VNXBB6OG4'
+    }
+]
+
+type RankListType = {
+    hotNum: number
+    id: string
+    imageUrl: string
+    name: string
+    province: string,
+    title: string
+}
+
+
+const Rank: React.FC = () => {
+
+    const [ RankList, setRankList ] = useState<RankListType[]>([])
+    
+    const [ topThree, setTopThree ] = useState<RankListType[]>([])
+
+
+
+    useEffect( () => {
+        GetRank()
+   
+        
+    },[])
+
+    // 获取地区排行榜
+    const GetRank = async () => {
+      const data = await getRank()
+      let cacheData = JSON.parse( JSON.stringify(data) )
+      
+      setRankList(cacheData.splice(3))
+
+      setTopThree(cacheData.splice(0, 3))
+    }
+
+    const RenderToeThree = (index: number) => {
+        
+        // 头像
+        const Ava = () =>  {
+            switch (index) {
+                case 0:
+                   return <View>
+                            <Image className='first-bg' src='http://res.training.luojigou.vip/Fth2HDhbpMpVZFanOLYDRjlmyAF_' />
+                            <Image className='Ava' src={topThree[index].imageUrl} />
+                          </View>
+             
+            
+                default:
+                    return  <Image className='Ava' src={topThree[index].imageUrl} />
+            }
+        }
+        
+        const Count = () => <View className='Count unify-Count'>
+                                <Image className='Count-img unify-Count-img' src={imgUrl[index].count} />
+                                <Text className='num'>12121</Text>
+                            </View> 
+
+        const Top = () => <Image className='Top' src={imgUrl[index].top} />
+
+        const Bottom =  () => <Image className='Bottom' src={imgUrl[index].bottom} />
+        return (
+            <View>
+                <Ava />
+                <Count />
+                <Top />
+                <Bottom />
+                <Text className='city-name unify-city-name'>河南</Text>
+            </View>
+        )
+    }
+
+    return (
+        <View className='Rank'>
+            <Image
+              className='rankbg' 
+              src={require('../../assets/Rank/rankbg.png')}
+            />
+            <View className='header'>
+                <View className='header-tip'>
+                    <View className='big'>
+                        地区热度排行榜
+                    </View>
+                    <View className='small'>
+                        地区参与人数
+                    </View>
+                </View>
+            </View>
+            {/* 背景图 */}
+            <View className='top-three'>
+                <Image className='top-bg' mode='aspectFit' src='http://res.training.luojigou.vip/FhueN6Svm_2LjXF4vqMOymO7nnAm' />
+                
+                <View className='second'>
+                    {
+                        topThree.length && RenderToeThree(1)
+                    }
+                </View>
+                <View className='first'>
+                    {
+                        topThree.length && RenderToeThree(0)
+                    }
+                </View>
+                <View className='thirdly'>
+                    {
+                        topThree.length && RenderToeThree(2)
+                    }
+                </View>
+
+                <View className='green-shade' />
+                
+            
+            </View>
+
+
+
+
+            <View className='rank-content'>
+                {
+                    RankList?.map((item, index) => (
+                        <View className='rank-content-item'  key={item.name}>
+                            <View className='ranking'>
+                                {index + 4}
+                            </View>
+                            <View className='city-ava'>
+                                <Image  mode='aspectFill' src={item.imageUrl} />
+                            </View>
+                            <View className='city-info'>
+                                <View className='city-name'>
+                                    {item.name}
+                                </View>
+                                <View className='city-hot'>
+                                    <Image mode='aspectFill' src='http://res.training.luojigou.vip/FrJMYoPUctdc_8BaoN9yWddoJyKq' />
+                                    <View className='hot-num'>
+                                        热度:  <Text> {item.hotNum}</Text> 
+                                    </View>
+                                </View>
+                            </View>
+                        </View>
+                    ))
+                }
+                
+            </View>
+           
+        </View>
+    )
+}
+
+export default Rank

src/pages/Report/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+    navigationBarTitleText: '测评报告'
+}
+  

src/pages/Report/index.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+
+import { View, Image, Text } from '@tarojs/components'
+
+import './index.scss'
+
+const Rate: React.FC = () => {
+    return (
+        <View className='Rate'>
+            <View className='ratebg-box'>
+                <Text> 答对3题，共18题 </Text>
+            </View>
+            <Image className='cloud' mode='aspectFill'  src={require('../../assets/Report/cloud.png')} />
+            <View className='percent'>
+                <View className='correct'>
+                    3
+                </View>
+                <View className='line'>
+                    /
+                </View>
+                <View className='total'>
+                    18
+                </View>
+            </View>
+            <Image mode='aspectFill' className='dog' src={require('../../assets/Report/dog.png')} />
+            <View className='data'>
+                <View>
+                    <Text className='label'>总时间：</Text>
+                    <Text className='value'>124s</Text>
+                </View>
+                <View>
+                    <Text className='label'>正确率：</Text>
+                    <Text className='value'>50%</Text>
+                </View>
+                <View>
+                    <Text className='label'>时间：</Text>
+                    <Text className='value'>2020.07.11</Text>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const Card: React.FC = () => {
+    return (
+        <View className='Card'>
+            <View className='card-item'>
+                <View className='label'>第一关卡片</View>
+                <View className='desc'>
+                    <View className='type'>逻辑思维</View>
+                    <View className='date'>
+                        <Image src={require('../../assets/Report/watch.png')} />
+                        <Text>35s</Text>
+                    </View>
+                </View>
+                <View className='line'></View>
+                <View className='star'>
+                   {
+                       [1,2,3,4].map( item => (
+                        <Image key={item} src={require('../../assets/Report/star.png')} />
+                       ))
+                   }
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const PromoteCard: React.FC = () => {
+    return (
+        <View className='PromoteCard'>
+            <View className='content'>
+                <View className='label'>数理逻辑能力提升方案</View>
+                <View className='desc'>卡片闯关游戏是提升我们能力哦</View>
+            </View>
+            <Image mode='aspectFill' src={require('../../assets/Report/btn.png')} />
+        </View>
+    )
+}
+
+const Collect: React.FC = () => {
+    return (
+        <View className='Collect'>
+            <Image className='logo' src={require('../../assets/Report/logo.png')} />
+            <View className='label'>E20线上作品收集</View>
+            <View className='desc-box'>
+                <View className='desc'>中国关工委健体中心素质能力培养计划</View>
+                <View className='btn'>点击查看</View>
+            </View> 
+        </View>
+    )
+}
+
+
+const FloatCard: React.FC = () => {
+    return (
+        <View className='FloatCard'>
+            <View className='card left'>题卡解析</View>
+            <View className='card right'>查看排行榜</View>
+        </View>
+    )
+}
+const Report: React.FC = () => {
+    return (
+        <View className='Report'>
+            <Rate />
+            <Card />
+            <PromoteCard />
+            <Collect />
+            <FloatCard />
+        </View>
+    )
+}
+export default Report
+

src/pages/TopicPage/a.ts

@@ -0,0 +1,367 @@
+export const test = {
+	"status": 200,
+	"message": null,
+	"result": {
+		"id": "1294216405065871361",
+		"gameId": "1293366524440903682",
+		"questionCard": null,
+		"questionCards": [{
+				"id": "1293117388768575489",
+				"voiceUrl": "https://app-resources-luojigou.luojigou.vip/e824aaa1-7d17-4d66-8162-7a33ed70ca94.mp3",
+				"title": "我们画、我们贴、我们建",
+				"label": "说一说皮博衣服的颜色。如果这些衣服都没有了颜色，是什么样子呢?请你从答案栏中找出来吧！",
+				"ableVar": "观察能力",
+				"bookId": "1293069910518218754",
+				"state": 1,
+				"createTime": "2020-08-11 17:29:45",
+				"updateTime": "2020-08-14 18:16:15",
+				"content": [{
+						"id": "1294216258084868098",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/Fqpa-QGcFos8tUAFF2_ewf_Ls2O8",
+						"x": 0,
+						"y": 17,
+						"w": 119,
+						"h": 74,
+						"bg": "false",
+						"color": "#FA0F0C",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 0,
+						"iy": 16,
+						"iw": 30,
+						"ih": 30,
+						"px": 0,
+						"py": 17,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null
+					},
+					{
+						"id": "1294216258084868099",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FvTfdFx5i7s0Ub3MO5rd7-ndLmD1",
+						"x": 4,
+						"y": 24,
+						"w": 106,
+						"h": 83,
+						"bg": "false",
+						"color": "#396C28",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 37,
+						"iy": 8,
+						"iw": 30,
+						"ih": 30,
+						"px": 119,
+						"py": 60,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null
+					},
+					{
+						"id": "1294216258084868100",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/Fowlxc5SHdPryibkPCzPK1cGIYbi",
+						"x": 0,
+						"y": 31,
+						"w": 120,
+						"h": 89,
+						"bg": "false",
+						"color": "#F7DF1E",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 79,
+						"iy": 71,
+						"iw": 30,
+						"ih": 30,
+						"px": 119,
+						"py": 187,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null
+					},
+					{
+						"id": "1294216258084868101",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FiSMBhhKTWT8TkbRfJBzrVJ2dMD-",
+						"x": 0,
+						"y": 2,
+						"w": 108,
+						"h": 88,
+						"bg": "false",
+						"color": "#23398C",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 0,
+						"iy": 54,
+						"iw": 30,
+						"ih": 30,
+						"px": 0,
+						"py": 155,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null
+					},
+					{
+						"id": "1294216258084868102",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FthWlZ6roO2hx8Ix2P2jQWEJ61HF",
+						"x": 0,
+						"y": 0,
+						"w": 108,
+						"h": 120,
+						"bg": "true",
+						"color": "",
+						"roundOrArrow": "0",
+						"rotate": 0,
+						"ix": 0,
+						"iy": 0,
+						"iw": 30,
+						"ih": 30,
+						"px": 0,
+						"py": 285,
+						"pw": 240,
+						"ph": 120,
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null
+					}
+				],
+				"options": [{
+						"id": "1294216258202308609",
+						"label": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FlSP_NuoOBeDmHtkZEa27xgser7Z",
+						"color": "#23398C",
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null,
+						"ifTrue": null
+					},
+					{
+						"id": "1294216258202308610",
+						"label": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/Fkhtpea8_DfFHLpVZvpQ3XNmTDnT",
+						"color": "#F7DF1E",
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null,
+						"ifTrue": null
+					},
+					{
+						"id": "1294216258202308611",
+						"label": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/Fsc2KDqbNvzdd2WoM96TC4H9Qj9y",
+						"color": "#396C28",
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null,
+						"ifTrue": null
+					},
+					{
+						"id": "1294216258202308612",
+						"label": null,
+						"cardId": "1293117388768575489",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/Ft9Dg8BJMdD21jN4u3J5Oa2gY9GA",
+						"color": "#FA0F0C",
+						"createTime": "2020-08-14 18:16:15",
+						"updateTime": null,
+						"ifTrue": null
+					}
+				]
+			},
+			{
+				"id": "1294197416713465858",
+				"voiceUrl": "https://app-resources-luojigou.luojigou.vip/c601358b-7cf4-463b-87b9-ae6608b95586.mp3",
+				"title": "我们画、我们贴、我们建",
+				"label": "泰迪用下面这些材料和工具做成了好多东西，你知道答案栏中的这些东西分别是由题目栏中哪一组材料做成的吗？",
+				"ableVar": "推理能力",
+				"bookId": "1293069910518218754",
+				"state": 1,
+				"createTime": "2020-08-14 17:01:23",
+				"updateTime": "2020-08-14 17:01:33",
+				"content": [{
+						"id": "1294197416843489281",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/Fg1aoRqlOMwsNjDQzc-0a2zqBxQ9",
+						"x": 2,
+						"y": 0,
+						"w": 94,
+						"h": 120,
+						"bg": "true",
+						"color": "",
+						"roundOrArrow": "0",
+						"rotate": 0,
+						"ix": 0,
+						"iy": 0,
+						"iw": 30,
+						"ih": 30,
+						"px": 0,
+						"py": 285,
+						"pw": 240,
+						"ph": 120,
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null
+					},
+					{
+						"id": "1294197416843489282",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FvZ21VeAxH5zw5FBEzKHtb8HqgRc",
+						"x": 0,
+						"y": 0,
+						"w": 104,
+						"h": 116,
+						"bg": "false",
+						"color": "#396C28",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 0,
+						"iy": 0,
+						"iw": 30,
+						"ih": 30,
+						"px": 0,
+						"py": 0,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null
+					},
+					{
+						"id": "1294197416851877889",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FgmbKvUxvAJTRu2K8_GIP8VxfBiB",
+						"x": 0,
+						"y": 0,
+						"w": 112,
+						"h": 109,
+						"bg": "false",
+						"color": "#FA0F0C",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 77,
+						"iy": 71,
+						"iw": 30,
+						"ih": 30,
+						"px": 119,
+						"py": 67,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null
+					},
+					{
+						"id": "1294197416851877890",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FkQhML1sU_eekT9M8CYHa5Dp0WkA",
+						"x": 0,
+						"y": 0,
+						"w": 120,
+						"h": 101,
+						"bg": "false",
+						"color": "#23398C",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 14,
+						"iy": 77,
+						"iw": 30,
+						"ih": 30,
+						"px": 0,
+						"py": 128,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null
+					},
+					{
+						"id": "1294197416851877891",
+						"label": null,
+						"voiceUrl": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FvR3jY8AD2LYLzAe7LPwVqVc4vN3",
+						"x": 0,
+						"y": 0,
+						"w": 116,
+						"h": 104,
+						"bg": "false",
+						"color": "#F7DF1E",
+						"roundOrArrow": null,
+						"rotate": 0,
+						"ix": 83,
+						"iy": 82,
+						"iw": 30,
+						"ih": 30,
+						"px": 105,
+						"py": 214,
+						"pw": 120,
+						"ph": 120,
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null
+					}
+				],
+				"options": [{
+						"id": "1294197416763797505",
+						"label": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/Ft-Vq9M820gJO7TznHF7oluWVBJu",
+						"color": "#396C28",
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null,
+						"ifTrue": null
+					},
+					{
+						"id": "1294197416763797506",
+						"label": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FolSc1J_KQQFdr1uBKu6iLQNQmIo",
+						"color": "#F7DF1E",
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null,
+						"ifTrue": null
+					},
+					{
+						"id": "1294197416763797507",
+						"label": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FokS_WdWjti_F5nvGAPAZ9d0qrBM",
+						"color": "#23398C",
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null,
+						"ifTrue": null
+					},
+					{
+						"id": "1294197416763797508",
+						"label": null,
+						"cardId": "1294197416713465858",
+						"imgUrl": "https://app-resources-luojigou.luojigou.vip/FqnzaFv1w1v45IgjaP1Se4IGpIZr",
+						"color": "#FA0F0C",
+						"createTime": "2020-08-14 17:01:23",
+						"updateTime": null,
+						"ifTrue": null
+					}
+				]
+			}
+		],
+		"createTime": null
+	}
+}

src/pages/TopicPage/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+    navigationStyle: 'custom'
+}
+  

src/pages/TopicPage/index.scss

@@ -0,0 +1,170 @@
+.TopicPage {
+    width: 100%;
+    min-height: 100vh;
+    background-color: rgba(35, 211, 33, 1);
+    font-family: PingFangSC-Regular, PingFang SC;
+    .bg {
+        width: 100vw;
+        height: 250px;
+    }
+}
+
+
+.TimeCom {
+    position: absolute;
+    top: 9.2vh;
+    left: 2.4vw;
+    width: 95.2vw;
+    height: 7.39vh;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 8px 0px #33B519;
+    border-radius: 6px;
+    padding: 0 38px 0px 22px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    .watch {
+        width: 38px;
+        height: 38px;
+    }
+    .second {
+        width: 102px;
+        height: 52px;
+        background: url('../../assets/TopicPage/second.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 28px;
+        font-weight: 600;
+        color: #FFFFFF;
+        margin-left: 20px;
+    }
+    .logo {
+        width: 240px;
+        height: 70px;
+        position: absolute;
+        right: 22px;
+    }
+}
+
+.BgPanel {
+    width: 100%;
+    height: 21.7%;
+    .dog {
+        width: 114px;
+        height: 150px;
+        position: absolute;
+        top: 3%;
+        left: 3.3vw;
+    }
+    .trumpet {
+        width: 106px;
+        height: 82px;
+        position: absolute;
+        top: 1.8%;
+        right: 3.6%;
+    }
+    .tip {
+        width: 70.3vw;
+        min-height: 6.16vh;
+        background: rgba(198, 199, 211, 0.09);
+        border-radius: 8px;
+        position: absolute;
+        right: 4.26%;
+        top: 7.23%;
+        padding: 6px;
+        box-sizing: border-box;
+        font-size: 24px;
+        font-weight: 400;
+        color: #6A719E;
+    }
+}
+
+.Course {
+    width: 714px;
+    height: 80vh;
+    background-color: #fff;
+    margin: 0 auto;
+    position: absolute;
+    top: 17.59vh;
+    left: 2.4vw;
+}
+
+.show-panel {
+    position: relative;
+    width: 470px;
+    height: 810px;
+    .round {
+       
+        border-radius: 50%;
+        position: absolute;
+        z-index: 2;
+    }
+
+    .game-item {
+        position: absolute;
+    }
+
+    // 闪烁动画
+    .ficker {
+        animation: fickerAni 2s infinite;
+    }
+
+    @keyframes fickerAni {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.4);
+        }
+        100% {
+            transform: scale(0.8);
+        }
+    }
+    .show-image {
+        // width: 140px;
+        // height: 222px;
+        position: absolute;
+    }
+}
+
+.opra-panel {
+    width: 23vw;
+    height: 49.56vh;
+    border: 2px solid #23D321;
+    border-top-right-radius: 20rpx;
+    border-bottom-right-radius: 20rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: 20.5%;
+    right: 6vw;
+    .answer-item {
+        width: 70%;
+        height: 192px;
+        border-bottom: 2px solid #23D321;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        .answer-round {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+        image {
+            width: 100%;
+            height: 62.5%;
+        }
+    }
+    .answer-item:last-child {
+        border: none;
+    }
+}
+

src/pages/TopicPage/index.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useEffect }  from 'react'
+
+import { View, Image, Text } from '@tarojs/components'
+
+import './index.scss'
+
+import { test } from './a'
+
+const TimeCom:React.FC = () => {
+    return (
+        <View className='TimeCom'>
+            <Image  className='watch' src={require('../../assets/TopicPage/watch.png')} />
+            <View className='second'>
+                <Text>3:00</Text>
+            </View>
+            <Image className='logo' src={require('../../assets/TopicPage/logo.png')} />
+        </View>
+    )
+}
+
+// 背景板
+const BgPanel: React.FC = () => {
+    return (
+        <View className='BgPanel'>
+            <Image className='dog' src={require('../../assets/TopicPage/dog.png')} />
+            <Image className='trumpet' src={require('../../assets/TopicPage/trumpet.png')} />
+            <View className='tip'>
+            小朋友们的衣服都挂在衣架上，请你看一看答
+            案栏中的衣服与衣架上哪件衣服是一样的。
+            </View>
+            
+        </View>
+    )
+} 
+
+const colorList = [ 
+    {
+        id: 1,
+        color: 'red',
+        top: 0,
+        left: 0
+    },
+    {
+        id: 2,
+        color: 'green',
+        top: 0,
+        left: 0
+    },
+    {
+        id: 3,
+        color: 'orange',
+        top: 0,
+        left: 0
+    },
+    {
+        id: 4,
+        color: 'pink',
+        top: 0,
+        left: 0
+    }
+]
+
+// 点击的过程卡片
+const Course: React.FC = () => {
+
+    const [ colorPond, setColorPond  ] = useState<string[]>(['', '', '', ''])
+
+    const [ fickerIndex, setFickerIndex] = useState<number>(1)
+
+    const [ fickerColor, setFickerColor] = useState<string>('')
+
+    const [ card, setCard ] = useState<Record<string, any>>({})
+
+    const [ opraList, setOpraList ] = useState<Record<string, any>>([])
+
+    const [ fickerId, SetFickerId ] = useState<string>('') 
+
+    useEffect( () => {
+        setFickerIndex(colorPond.filter( item => !!item ).length + 1 )
+        setFickerColor(colorList[0].color)
+        
+    }, [colorPond])
+
+    useEffect( () => {
+        console.log(test.result);
+        
+        setCard(test.result.questionCards[0])
+    }, [card])
+
+    // 点击选择当前答案  选择当前的颜色
+
+    const clickAnswer = (index: number) => {
+        setFickerColor(colorList[fickerIndex].color)
+    }
+
+    return (
+        <View className='Course'>
+            {/*  */}
+            <BgPanel />
+
+            {/* 左侧显示面板 */}
+            <View className='show-panel'>
+                {/* 展示图 */}
+                {
+                   card.content?.map( (item, index) => (
+                       <View 
+                         className='game-item' 
+                         key={item.id}
+                         style={{
+                             width: item.pw,
+                             height: item.ph,
+                             top: item.py,
+                             left: item.px
+                         }}
+                       >
+                           {/* 圆 */}
+                           <View 
+                             className={['round',  item.id === fickerIndex? 'ficker' : ''].join(',')}
+                             style={{
+                                background: item.color,
+                                width: item.iw,
+                                height: item.ih,
+                                top: item.iy,
+                                left: item.ih
+                             }}
+                           />
+
+                           {/* 图片 */}
+                           <Image 
+                             className={['show-image', 'show' + index + 1].join(',')}
+                             src={item.imgUrl}
+                             style={{
+                             width: item.w, 
+                             height: item.h, 
+                             top: item.y, 
+                             left: item.x, 
+                             position: 'absolute'
+                            }}
+                           />
+                       </View>
+                       
+                   )) 
+                }
+                
+            </View>
+            {/* 右侧选择面板 */}
+            <View className='opra-panel' >
+                {
+                    card.options?.map( item => (
+                        <View className='answer-item' key={item.id} onClick={() => clickAnswer(item)}>
+                            <View  className='answer-round' v-if='item.selectColor' />
+                            <Image  mode='aspectFill' src={item.imgUrl} />
+                        </View>
+                    ))
+                }
+            </View>
+
+        </View>
+    )
+}
+
+const TopicPage: React.FC = () => {
+    return (
+        <View className='TopicPage'>
+            <Image className='bg' src={require('../../assets/TopicPage/bg.png')} />
+            <TimeCom />
+            <Course />
+        </View>
+    )
+}
+
+export default TopicPage

src/service/config.ts

@@ -4,14 +4,16 @@
  *  后台返回的状态码从这里修改 一般有 code status state
  * 
  */
-export const errorKey: string = 'code'
+export const errorKey: string = 'status'
 
 /**
  *  错误码
  */
-export const errorCode: number = 0
+export const errorCode: number = 200
 
 
 /**
  * 错误描述
- */
+ */
+
+ export const BASEURL = 'https://open.luojigou.vip'

src/service/request.ts

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro'
 import Tip from '../utils/tip'
-import { errorKey, errorCode } from './config'
+import { errorKey, errorCode, BASEURL } from './config'
 
 type paramsType = {
     baseUrl?: string,
@@ -35,7 +35,7 @@ export const request = async (params: paramsType): Promise<any> => {
     const {baseUrl, url, method, data, header, timeout, responseType} = params
     return new Promise( async resolve => {
         const result = await Taro.request({
-            url: baseUrl + url,
+            url:  baseUrl ? baseUrl + url : BASEURL + url,
             method: method || 'GET',
             data,
             header: {
@@ -47,9 +47,12 @@ export const request = async (params: paramsType): Promise<any> => {
             responseType
         });
         
+
+        console.log(result);
+        
         // eslint-disable-next-line no-shadow
         const { statusCode  } = result
-        const { message, data: Data } = result.data
+        const { message, result: Data } = result.data
         console.log(Data);
         
         errorHandle (statusCode, result.data[errorKey], message, baseUrl + url)