custom/public/css/git.openi.css

@@ -419,41 +419,40 @@
 @media only screen and (min-width: 1920px) {
 
 }
-
-/* rotation3D */
-#app{
-  position: relative;
-  width: 800px;
-  margin: 0 auto;
-  z-index: 4;
-}
-.rotation3D-baseMap{
-  position: absolute; left: 0; right: 0; top: 104px; margin: auto;
-  width: 800px; height: 516px;
-  background: url("../rotation3D/img/baseMap.png") no-repeat;
-  background-size: cover;
-}
-.rotation3D-baseMap::before{
-  position: absolute; 
-  margin: auto; z-index: 99;            
-  left:50%; top: -150px; 
-  transform:translate(-50%,0);
-  width: 342px; height: 470px; display: block; content: '';
-  background: url("../rotation3D/img/baseLogo.svg");
-  /*animation: 10s bounceUpDown infinite;*/
-}
-.rotation3D-baseMap::after{
-  position: absolute; 
-  margin: auto; z-index: 100;
-  left:50%; top:0; 
-  transform:translate(-50%,0);
-  width: 110px; height: 86px; display: block; content: '';
-  background: url("../rotation3D/img/brain.svg");
-  animation: 6s bounceUpDown infinite;
-  mix-blend-mode: color-dodge;
-}
-@keyframes bounceUpDown{
-  0% {transform: translate(-50%, 0px);}
-  50% {transform: translate(-50%, -15px);}
-  100% {transform: translate(-50%, 0px);}
+/* rotation3D */	
+#app{	
+  position: relative;	
+  width: 800px;	
+  margin: 0 auto;	
+  z-index: 4;	
+}	
+.rotation3D-baseMap{	
+  position: absolute; left: 0; right: 0; top: 104px; margin: auto;	
+  width: 800px; height: 516px;	
+  background: url("../rotation3D/img/baseMap.png") no-repeat;	
+  background-size: cover;	
+}	
+.rotation3D-baseMap::before{	
+  position: absolute; 	
+  margin: auto; z-index: 99;            	
+  left:50%; top: -150px; 	
+  transform:translate(-50%,0);	
+  width: 342px; height: 470px; display: block; content: '';	
+  background: url("../rotation3D/img/baseLogo.svg");	
+  /*animation: 10s bounceUpDown infinite;*/	
+}	
+.rotation3D-baseMap::after{	
+  position: absolute; 	
+  margin: auto; z-index: 100;	
+  left:50%; top:0; 	
+  transform:translate(-50%,0);	
+  width: 110px; height: 86px; display: block; content: '';	
+  background: url("../rotation3D/img/brain.svg");	
+  animation: 6s bounceUpDown infinite;	
+  mix-blend-mode: color-dodge;	
+}	
+@keyframes bounceUpDown{	
+  0% {transform: translate(-50%, 0px);}	
+  50% {transform: translate(-50%, -15px);}	
+  100% {transform: translate(-50%, 0px);}	
 }

models/cloudbrain.go

@@ -345,6 +345,19 @@ func (task *Cloudbrain) CorrectCreateUnix() {
 	}
 }
 
+func (task *Cloudbrain) GetAiCenter() string {
+	if task.Type == TypeCloudBrainOne {
+		return AICenterOfCloudBrainOne
+	} else if task.Type == TypeCloudBrainTwo {
+		return AICenterOfCloudBrainTwo
+	} else if task.Type == TypeCDCenter {
+		return AICenterOfChengdu
+	} else {
+		return strings.Split(task.AiCenter, "+")[0]
+	}
+
+}
+
 func AllTerminalStatus() []string {
 	return []string{string(ModelArtsTrainJobCompleted), string(ModelArtsTrainJobFailed),
 		string(ModelArtsTrainJobKilled), string(ModelArtsStopped),
@@ -2947,6 +2960,16 @@ func CloudbrainAllStatic(opts *CloudbrainsOptions) ([]*CloudbrainInfo, int64, er
 	return cloudbrains, count, nil
 }
 
+func GetLastestNCloudbrain(n int) ([]*Cloudbrain, error) {
+	r := make([]*Cloudbrain, 0)
+	err := x.Where("ai_center!='' or type!=2").Desc("id").Limit(n).Unscoped().Find(&r)
+	if err != nil {
+		return nil, err
+	}
+	return r, nil
+
+}
+
 func CloudbrainAllKanBan(opts *CloudbrainsOptions) ([]*CloudbrainInfo, int64, error) {
 	sess := x.NewSession()
 	defer sess.Close()

models/cloudbrain_static.go

@@ -144,6 +144,23 @@ func GetCloudbrainStatusCount() ([]map[string]string, error) {
 	return x.QueryString(countSql)
 }
 
+func GetCloudbrainCardTimeAndCountGroupByAICenter() ([]map[string]string, error) {
+	countSql := `select ai_center,SUM(
+            COALESCE(a.duration *
+				CASE
+				WHEN a.work_server_number = 0 THEN 1
+				ELSE COALESCE(a.work_server_number, 1)
+				END *
+				COALESCE(cloudbrain_spec.acc_cards_num, 1), 0)
+   ) as card_duration,count(*) num from
+
+(select  id,duration,work_server_number,case when type=0 then 'OpenIOne' when type=1 then 'OpenITwo' when type=3 then 'OpenIChengdu' else split_part(ai_center, '+',1)
+        end ai_center
+FROM public.cloudbrain ) a Left JOIN cloudbrain_spec on a.id = cloudbrain_spec.cloudbrain_id
+where ai_center!='' group by  a.ai_center order by card_duration desc`
+	return x.QueryString(countSql)
+}
+
 func GetCloudbrainTpyeDurationSum() ([]map[string]string, error) {
 	countSql := "SELECT type,sum(duration) FROM public.cloudbrain group by type order by sum(duration) desc"
 	return x.QueryString(countSql)

models/ip_location.go

@@ -0,0 +1,30 @@
+package models
+
+type IPLocation struct {
+	ID        int64  `xorm:"pk autoincr"`
+	IpAddr    string `xorm:"unique"`
+	Longitude string
+	Latitude  string
+}
+
+func CreateIPLocation(ipLocation *IPLocation) (err error) {
+	_, err = x.Insert(ipLocation)
+	return err
+
+}
+
+func GetIpLocation(ip string) (*IPLocation, error) {
+
+	ipLocation := &IPLocation{IpAddr: ip}
+	has, err := x.Get(ipLocation)
+	if err != nil {
+		return nil, err
+	}
+
+	if has {
+		return ipLocation, nil
+	} else {
+		return nil, ErrRecordNotExist{}
+	}
+
+}

models/models.go

@@ -173,6 +173,7 @@ func init() {
 		new(AiModelCollect),
 		new(AiModelFile),
 		new(ModelMigrateRecord),
+		new(IPLocation),
 		new(ModelartsDeploy),
 		new(ModelartsDeployQueue),
 	)

models/user_login_log.go

@@ -13,6 +13,15 @@ type UserLoginLog struct {
 	CreatedUnix timeutil.TimeStamp `xorm:"created"`
 }
 
+func GetIpByUID(uid int64) string {
+	userLoginLog := new(UserLoginLog)
+	has, err := xStatistic.Where("u_id=?", uid).Desc("id").Limit(1).Get(userLoginLog)
+	if err != nil || !has {
+		return ""
+	}
+	return userLoginLog.IpAddr
+}
+
 func SaveLoginInfoToDb(r *http.Request, u *User) {
 	statictisSess := xStatistic.NewSession()
 	defer statictisSess.Close()

modules/ipinfo/ipinfo.go

@@ -0,0 +1,44 @@
+package ipinfo
+
+import (
+	"crypto/tls"
+	"fmt"
+	"net/http"
+
+	"code.gitea.io/gitea/modules/setting"
+
+	"github.com/go-resty/resty/v2"
+)
+
+var restyClient *resty.Client
+
+type IpInfoResponse struct {
+	Ip    string `json:"ip"`
+	Loc   string `json:"loc"`
+	Bogon bool   `json:"bogon"`
+}
+
+func getRestyClient() *resty.Client {
+	if restyClient == nil {
+		restyClient = resty.New()
+		restyClient.SetTLSClientConfig(&tls.Config{InsecureSkipVerify: true})
+	}
+	return restyClient
+}
+
+func GetLocationByIp(ip string) (*IpInfoResponse, error) {
+	client := getRestyClient()
+	var result IpInfoResponse
+	res, err := client.R().
+		SetHeader("Accept", "application/json").
+		SetAuthToken(setting.IPInfo.Token).
+		SetResult(&result).
+		Get(setting.IPInfo.Host + "/" + ip)
+	if err != nil {
+		return nil, err
+	}
+	if res.StatusCode() != http.StatusOK {
+		return nil, fmt.Errorf("http status is %d", res.StatusCode())
+	}
+	return &result, nil
+}

modules/setting/screen_map.go

@@ -0,0 +1,24 @@
+package setting
+
+var ScreenMap = struct {
+	ShowData bool
+	MinValue int
+	MaxValue int
+}{}
+
+var IPInfo = struct {
+	Host  string
+	Token string
+}{}
+
+func NewScreenMapConfig() {
+	sec := Cfg.Section("Screen")
+	ScreenMap.ShowData = sec.Key("ShowData").MustBool(false)
+	ScreenMap.MinValue = sec.Key("MinValue").MustInt(130)
+	ScreenMap.MaxValue = sec.Key("MaxValue").MustInt(190)
+
+	sec = Cfg.Section("IPInfo")
+
+	IPInfo.Host = sec.Key("Host").MustString("https://ipinfo.io")
+	IPInfo.Token = sec.Key("Token").MustString("df2b002afe582a")
+}

modules/setting/setting.go

@@ -70,6 +70,8 @@ type C2NetSequenceInfo struct {
 	Name      string `json:"name"`
 	Content   string `json:"content"`
 	ContentEN string `json:"content_en"`
+	Loc       string `json:"loc"`
+	Type      string `json:"type"`
 }
 
 type C2NetSqInfos struct {
@@ -624,20 +626,21 @@ var (
 
 	//grampus config
 	Grampus = struct {
-		Env                     string
-		Host                    string
-		UserName                string
-		Password                string
-		SpecialPools            string
-		C2NetSequence           string
-		SyncScriptProject       string
-		LocalCenterID           string
-		GPULocalCenterID        string
-		AiCenterInfo            string
-		AiCenterCodeAndNameInfo string
-		UsageRateBeginTime      string
-		GPUImageCommonName      string
-		MultiNode               string
+		Env                           string
+		Host                          string
+		UserName                      string
+		Password                      string
+		SpecialPools                  string
+		C2NetSequence                 string
+		SyncScriptProject             string
+		LocalCenterID                 string
+		GPULocalCenterID              string
+		AiCenterInfo                  string
+		AiCenterCodeAndNameInfo       string
+		AiCenterCodeAndNameAndLocInfo string
+		UsageRateBeginTime            string
+		GPUImageCommonName            string
+		MultiNode                     string
 	}{}
 
 	ClearStrategy = struct {
@@ -655,6 +658,8 @@ var (
 	C2NetMapInfo               map[string]*C2NetSequenceInfo
 	AiCenterCodeAndNameMapInfo map[string]*C2NetSequenceInfo
 
+	AiCenterCodeAndNameAndLocMapInfo map[string]*C2NetSequenceInfo
+
 	//elk config
 	ElkUrl              string
 	ElkUser             string
@@ -1623,30 +1628,7 @@ func NewContext() {
 	UserBasePath = sec.Key("BASE_PATH_USER").MustString("users/")
 	PROXYURL = sec.Key("PROXY_URL").MustString("")
 
-	sec = Cfg.Section("modelarts")
-	ModelArtsHost = sec.Key("ENDPOINT").MustString("")
-	IamHost = sec.Key("IAMHOST").MustString("")
-	ProjectID = sec.Key("PROJECT_ID").MustString("")
-	ProjectName = sec.Key("PROJECT_NAME").MustString("")
-	ModelArtsUsername = sec.Key("USERNAME").MustString("")
-	ModelArtsPassword = sec.Key("PASSWORD").MustString("")
-	ModelArtsDomain = sec.Key("DOMAIN").MustString("")
-	AllowedOrg = sec.Key("ORGANIZATION").MustString("")
-	ProfileID = sec.Key("PROFILE_ID").MustString("")
-	PoolInfos = sec.Key("POOL_INFOS").MustString("")
-	ImageInfos = sec.Key("IMAGE_INFOS").MustString("")
-	Capacity = sec.Key("CAPACITY").MustInt(100)
-	MaxTempQueryTimes = sec.Key("MAX_TEMP_QUERY_TIMES").MustInt(30)
-	ResourcePools = sec.Key("Resource_Pools").MustString("")
-	Engines = sec.Key("Engines").MustString("")
-	EngineVersions = sec.Key("Engine_Versions").MustString("")
-	FlavorInfos = sec.Key("FLAVOR_INFOS").MustString("")
-	TrainJobFLAVORINFOS = sec.Key("TrainJob_FLAVOR_INFOS").MustString("")
-	ModelArtsSpecialPools = sec.Key("SPECIAL_POOL").MustString("")
-	ModelArtsMultiNode = sec.Key("MULTI_NODE").MustString("")
-	ModelArtsShareAddr = sec.Key("ModelArts_Share_Addr").MustString("192.168.0.30:/")
-	ModelArtsMountPath = sec.Key("ModelArts_Mount_Path").MustString("/cache/sfs")
-	ModelArtsNasType = sec.Key("ModelArts_Nas_Type").MustString("nfs")
+	GetModelartsConfig()
 
 	sec = Cfg.Section("elk")
 	ElkUrl = sec.Key("ELKURL").MustString("")
@@ -1742,12 +1724,41 @@ func NewContext() {
 	BaiduWenXin.RUN_WORKERS = sec.Key("RUN_WORKERS").MustInt(1)
 	BaiduWenXin.MODEL_SERVERS = sec.Key("MODEL_SERVERS").MustInt(1)
 
-	getGrampusConfig()
-	getModelartsCDConfig()
+	GetGrampusConfig()
+	GetModelartsCDConfig()
 	getModelConvertConfig()
 	getModelSafetyConfig()
 	getModelAppConfig()
 	getClearStrategy()
+	NewScreenMapConfig()
+}
+
+func GetModelartsConfig() {
+	sec := Cfg.Section("modelarts")
+	ModelArtsHost = sec.Key("ENDPOINT").MustString("")
+	IamHost = sec.Key("IAMHOST").MustString("")
+	ProjectID = sec.Key("PROJECT_ID").MustString("")
+	ProjectName = sec.Key("PROJECT_NAME").MustString("")
+	ModelArtsUsername = sec.Key("USERNAME").MustString("")
+	ModelArtsPassword = sec.Key("PASSWORD").MustString("")
+	ModelArtsDomain = sec.Key("DOMAIN").MustString("")
+	AllowedOrg = sec.Key("ORGANIZATION").MustString("")
+	ProfileID = sec.Key("PROFILE_ID").MustString("")
+	PoolInfos = sec.Key("POOL_INFOS").MustString("")
+	ImageInfos = sec.Key("IMAGE_INFOS").MustString("")
+	Capacity = sec.Key("CAPACITY").MustInt(100)
+	MaxTempQueryTimes = sec.Key("MAX_TEMP_QUERY_TIMES").MustInt(30)
+	ResourcePools = sec.Key("Resource_Pools").MustString("")
+	Engines = sec.Key("Engines").MustString("")
+	EngineVersions = sec.Key("Engine_Versions").MustString("")
+	FlavorInfos = sec.Key("FLAVOR_INFOS").MustString("")
+	TrainJobFLAVORINFOS = sec.Key("TrainJob_FLAVOR_INFOS").MustString("")
+	ModelArtsSpecialPools = sec.Key("SPECIAL_POOL").MustString("")
+	ModelArtsMultiNode = sec.Key("MULTI_NODE").MustString("")
+	ModelArtsShareAddr = sec.Key("ModelArts_Share_Addr").MustString("192.168.0.30:/")
+	ModelArtsMountPath = sec.Key("ModelArts_Mount_Path").MustString("/cache/sfs")
+	ModelArtsNasType = sec.Key("ModelArts_Nas_Type").MustString("nfs")
+
 	getFineTuneConfig()
 }
 
@@ -1794,7 +1805,7 @@ func getModelAppConfig() {
 
 }
 
-func getModelartsCDConfig() {
+func GetModelartsCDConfig() {
 	sec := Cfg.Section("modelarts-cd")
 
 	ModelartsCD.Enabled = sec.Key("ENABLED").MustBool(false)
@@ -1821,7 +1832,7 @@ func getClearStrategy() {
 	ClearStrategy.RunAtStart = sec.Key("RUN_AT_START").MustBool(false)
 }
 
-func getGrampusConfig() {
+func GetGrampusConfig() {
 	sec := Cfg.Section("grampus")
 
 	Grampus.Env = sec.Key("ENV").MustString("TEST")
@@ -1831,6 +1842,8 @@ func getGrampusConfig() {
 	Grampus.SpecialPools = sec.Key("SPECIAL_POOL").MustString("")
 	Grampus.C2NetSequence = sec.Key("C2NET_SEQUENCE").MustString("{\"sequence\":[{\"id\":1,\"name\":\"cloudbrain_one\",\"content\":\"鹏城云脑一号\",\"content_en\":\"Pencheng Cloudbrain Ⅰ\"},{\"id\":2,\"name\":\"cloudbrain_two\",\"content\":\"鹏城云脑二号\",\"content_en\":\"Pencheng Cloudbrain Ⅱ\"},{\"id\":3,\"name\":\"beida\",\"content\":\"北大人工智能集群系统\",\"content_en\":\"Peking University AI Center\"},{\"id\":4,\"name\":\"hefei\",\"content\":\"合肥类脑智能开放平台\",\"content_en\":\"Hefei AI Center\"},{\"id\":5,\"name\":\"wuhan\",\"content\":\"武汉人工智能计算中心\",\"content_en\":\"Wuhan AI Center\"},{\"id\":6,\"name\":\"xian\",\"content\":\"西安未来人工智能计算中心\",\"content_en\":\"Xi'an AI Center\"},{\"id\":7,\"pclcci\":\"more\",\"content\":\"鹏城云计算所\",\"content_en\":\"Pengcheng Cloud Computing Institute\"},{\"id\":8,\"name\":\"xuchang\",\"content\":\"中原人工智能计算中心\",\"content_en\":\"Zhongyuan AI Center\"},{\"id\":9,\"name\":\"chengdu\",\"content\":\"成都人工智能计算中心\",\"content_en\":\"Chengdu AI Center\"},{\"id\":10,\"name\":\"more\",\"content\":\"横琴先进智能计算中心\",\"content_en\":\"Hengqin AI Center\"},{\"id\":11,\"name\":\"more\",\"content\":\"国家超级计算济南中心\",\"content_en\":\"HPC & AI Center\"}]}")
 	Grampus.AiCenterCodeAndNameInfo = sec.Key("AI_CENTER_CODE_AND_NAME").MustString("{\"sequence\":[{\"id\":1,\"name\":\"cloudbrain_one\",\"content\":\"鹏城云脑一号\",\"content_en\":\"Pencheng Cloudbrain Ⅰ\"},{\"id\":2,\"name\":\"cloudbrain_two\",\"content\":\"鹏城云脑二号\",\"content_en\":\"Pencheng Cloudbrain Ⅱ\"},{\"id\":3,\"name\":\"beida\",\"content\":\"北大人工智能集群系统\",\"content_en\":\"Peking University AI Center\"},{\"id\":4,\"name\":\"hefei\",\"content\":\"合肥类脑智能开放平台\",\"content_en\":\"Hefei AI Center\"},{\"id\":5,\"name\":\"wuhan\",\"content\":\"武汉人工智能计算中心\",\"content_en\":\"Wuhan AI Center\"},{\"id\":6,\"name\":\"xian\",\"content\":\"西安未来人工智能计算中心\",\"content_en\":\"Xi'an AI Center\"},{\"id\":7,\"pclcci\":\"more\",\"content\":\"鹏城云计算所\",\"content_en\":\"Pengcheng Cloud Computing Institute\"},{\"id\":8,\"name\":\"xuchang\",\"content\":\"中原人工智能计算中心\",\"content_en\":\"Zhongyuan AI Center\"},{\"id\":9,\"name\":\"chengdu\",\"content\":\"成都人工智能计算中心\",\"content_en\":\"Chengdu AI Center\"},{\"id\":10,\"name\":\"more\",\"content\":\"横琴先进智能计算中心\",\"content_en\":\"Hengqin AI Center\"},{\"id\":11,\"name\":\"more\",\"content\":\"国家超级计算济南中心\",\"content_en\":\"HPC & AI Center\"}]}")
+	Grampus.AiCenterCodeAndNameAndLocInfo = sec.Key("AI_CENTER_CODE_AND_NAME_AND_LOC").MustString("{\"sequence\":[{\"id\":1,\"name\":\"cloudbrain_one\",\"content\":\"鹏城云脑一号\",\"content_en\":\"Pencheng Cloudbrain Ⅰ\"},{\"id\":2,\"name\":\"cloudbrain_two\",\"content\":\"鹏城云脑二号\",\"content_en\":\"Pencheng Cloudbrain Ⅱ\"},{\"id\":3,\"name\":\"beida\",\"content\":\"北大人工智能集群系统\",\"content_en\":\"Peking University AI Center\"},{\"id\":4,\"name\":\"hefei\",\"content\":\"合肥类脑智能开放平台\",\"content_en\":\"Hefei AI Center\"},{\"id\":5,\"name\":\"wuhan\",\"content\":\"武汉人工智能计算中心\",\"content_en\":\"Wuhan AI Center\"},{\"id\":6,\"name\":\"xian\",\"content\":\"西安未来人工智能计算中心\",\"content_en\":\"Xi'an AI Center\"},{\"id\":7,\"pclcci\":\"more\",\"content\":\"鹏城云计算所\",\"content_en\":\"Pengcheng Cloud Computing Institute\"},{\"id\":8,\"name\":\"xuchang\",\"content\":\"中原人工智能计算中心\",\"content_en\":\"Zhongyuan AI Center\"},{\"id\":9,\"name\":\"chengdu\",\"content\":\"成都人工智能计算中心\",\"content_en\":\"Chengdu AI Center\"},{\"id\":10,\"name\":\"more\",\"content\":\"横琴先进智能计算中心\",\"content_en\":\"Hengqin AI Center\"},{\"id\":11,\"name\":\"more\",\"content\":\"国家超级计算济南中心\",\"content_en\":\"HPC & AI Center\"}]}")
+
 	Grampus.UsageRateBeginTime = sec.Key("USAGE_RATE_BEGIN_TIME").MustString("2021-01-01 00:00:00")
 	Grampus.GPUImageCommonName = sec.Key("GPU_IMAGE_COMMON_NAME").MustString("image")
 	if Grampus.C2NetSequence != "" {
@@ -1842,6 +1855,15 @@ func getGrampusConfig() {
 			C2NetMapInfo[value.Name] = value
 		}
 	}
+	if Grampus.AiCenterCodeAndNameAndLocInfo != "" {
+		if err := json.Unmarshal([]byte(Grampus.AiCenterCodeAndNameAndLocInfo), &C2NetInfos); err != nil {
+			log.Error("Unmarshal(AiCenterCodeAndNameLocInfo) failed:%v", err)
+		}
+		AiCenterCodeAndNameAndLocMapInfo = make(map[string]*C2NetSequenceInfo)
+		for _, value := range C2NetInfos.C2NetSqInfo {
+			AiCenterCodeAndNameAndLocMapInfo[value.Name] = value
+		}
+	}
 	if Grampus.AiCenterCodeAndNameInfo != "" {
 		if err := json.Unmarshal([]byte(Grampus.AiCenterCodeAndNameInfo), &C2NetInfos); err != nil {
 			log.Error("Unmarshal(AiCenterCodeAndNameInfo) failed:%v", err)
@@ -1851,6 +1873,7 @@ func getGrampusConfig() {
 			AiCenterCodeAndNameMapInfo[value.Name] = value
 		}
 	}
+
 	Grampus.SyncScriptProject = sec.Key("SYNC_SCRIPT_PROJECT").MustString("script_for_grampus")
 	Grampus.LocalCenterID = sec.Key("LOCAL_CENTER_ID").MustString("cloudbrain2")
 	Grampus.GPULocalCenterID = sec.Key("GPU_LOCAL_CENTER_ID").MustString("openi")
@@ -1984,22 +2007,20 @@ func ensureLFSDirectory() {
 }
 
 func getNotebookImageInfos() {
-	if StImageInfos == nil {
-		if ModelartsCD.Enabled {
-			json.Unmarshal([]byte(ModelartsCD.ImageInfos), &StImageInfos)
-		} else {
-			json.Unmarshal([]byte(ImageInfos), &StImageInfos)
-		}
+
+	if ModelartsCD.Enabled {
+		json.Unmarshal([]byte(ModelartsCD.ImageInfos), &StImageInfos)
+	} else {
+		json.Unmarshal([]byte(ImageInfos), &StImageInfos)
 	}
 }
 
 func getNotebookFlavorInfos() {
-	if StFlavorInfo == nil {
-		if ModelartsCD.Enabled {
-			json.Unmarshal([]byte(ModelartsCD.FlavorInfos), &StFlavorInfo)
-		} else {
-			json.Unmarshal([]byte(FlavorInfos), &StFlavorInfo)
-		}
+
+	if ModelartsCD.Enabled {
+		json.Unmarshal([]byte(ModelartsCD.FlavorInfos), &StFlavorInfo)
+	} else {
+		json.Unmarshal([]byte(FlavorInfos), &StFlavorInfo)
 	}
 }
 

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "aiforge",
+  "name": "aiforge1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -21,7 +21,7 @@
         "dayjs": "1.10.7",
         "domino": "2.1.5",
         "dropzone": "5.7.2",
-        "echarts": "3.8.5",
+        "echarts": "5.4.2",
         "element-ui": "2.15.5",
         "esdk-obs-browserjs": "3.22.3",
         "esdk-obs-nodejs": "3.20.11",
@@ -5448,13 +5448,19 @@
       }
     },
     "node_modules/echarts": {
-      "version": "3.8.5",
-      "resolved": "https://registry.npmmirror.com/echarts/download/echarts-3.8.5.tgz",
-      "integrity": "sha1-WOSlHSdDxvt1JXsNwKnPn1N4rA4=",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
+      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
       "dependencies": {
-        "zrender": "3.7.4"
+        "tslib": "2.3.0",
+        "zrender": "5.4.3"
       }
     },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/editions": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/editions/-/editions-1.3.4.tgz",
@@ -20940,9 +20946,17 @@
       "integrity": "sha1-6NV3TRwHOKR7z6hynzcS4t7d6yU="
     },
     "node_modules/zrender": {
-      "version": "3.7.4",
-      "resolved": "https://registry.nlark.com/zrender/download/zrender-3.7.4.tgz",
-      "integrity": "sha1-+EfVOUhIHvbUKQbR6prux6y+/fI="
+      "version": "5.4.3",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
+      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -25312,11 +25326,19 @@
       }
     },
     "echarts": {
-      "version": "3.8.5",
-      "resolved": "https://registry.npmmirror.com/echarts/download/echarts-3.8.5.tgz",
-      "integrity": "sha1-WOSlHSdDxvt1JXsNwKnPn1N4rA4=",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
+      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
       "requires": {
-        "zrender": "3.7.4"
+        "tslib": "2.3.0",
+        "zrender": "5.4.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
       }
     },
     "editions": {
@@ -37726,9 +37748,19 @@
       "integrity": "sha1-6NV3TRwHOKR7z6hynzcS4t7d6yU="
     },
     "zrender": {
-      "version": "3.7.4",
-      "resolved": "https://registry.nlark.com/zrender/download/zrender-3.7.4.tgz",
-      "integrity": "sha1-+EfVOUhIHvbUKQbR6prux6y+/fI="
+      "version": "5.4.3",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
+      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -20,7 +20,7 @@
     "dayjs": "1.10.7",
     "domino": "2.1.5",
     "dropzone": "5.7.2",
-    "echarts": "3.8.5",
+    "echarts": "5.4.2",
     "element-ui": "2.15.5",
     "esdk-obs-browserjs": "3.22.3",
     "esdk-obs-nodejs": "3.20.11",

routers/api/v1/api.go

@@ -62,6 +62,8 @@ import (
 	"net/http"
 	"strings"
 
+	cloudbrainService "code.gitea.io/gitea/services/cloudbrain"
+
 	"code.gitea.io/gitea/entity/ai_task_entity"
 	"code.gitea.io/gitea/routers/ai_task"
 
@@ -748,6 +750,9 @@ func RegisterRoutes(m *macaron.Macaron) {
 
 		//cloudbrain board
 		m.Get("/cloudbrainboard/cloudbrain/resource_queues", repo.GetResourceQueues)
+		m.Get("/cloudbrainboard/ai_center_overview", repo.GetCloubrainOverviewGroupByAiCenter)
+		m.Get("/cloudbrainboard/location", cloudbrainService.GetCloudbrainLocationInfo)
+
 		m.Group("/cloudbrainboard", func() {
 			m.Get("/downloadAll", repo.DownloadCloudBrainBoard)
 			m.Group("/cloudbrain", func() {

routers/api/v1/repo/cloudbrain_dashboard.go

@@ -4,10 +4,13 @@ import (
 	"fmt"
 	"net/http"
 	"net/url"
+	"sort"
 	"strconv"
 	"strings"
 	"time"
 
+	"code.gitea.io/gitea/modules/setting"
+
 	"code.gitea.io/gitea/services/cloudbrain/resource"
 
 	"code.gitea.io/gitea/models"
@@ -163,6 +166,112 @@ func GetOverviewDuration(ctx *context.Context) {
 	})
 }
 
+func GetCloubrainOverviewGroupByAiCenter(ctx *context.Context) {
+
+	cloudbrainCardTimeAndCountArray, err := models.GetCloudbrainCardTimeAndCountGroupByAICenter()
+	if err != nil {
+		log.Error("Can not query CardTimeAndCount.", err)
+	}
+
+	cardTimeMap, maxCardTime, _ := getCenterCardTimeInfo(cloudbrainCardTimeAndCountArray)
+
+	var aiCenterLocationInfos = make(map[string][]*cloudbrainService.AiCenterLocationInfo, 0)
+
+	const AI_CENTER = "智算中心"
+	for _, value := range setting.AiCenterCodeAndNameAndLocMapInfo {
+		long, lat := getLongLat(value.Loc)
+		aicenterArray, ok := aiCenterLocationInfos[value.Type]
+		if !ok {
+			aicenterArray = make([]*cloudbrainService.AiCenterLocationInfo, 0)
+
+		}
+		if value.Type == "超算中心" || value.Type == "东数西算" {
+
+			aiCenterLocationInfos[value.Type] = append(aicenterArray, &cloudbrainService.AiCenterLocationInfo{
+				Name:      cloudbrainService.GetAiCenterShowByAiCenterId(value.Name, ctx),
+				Longitude: long,
+				Latitude:  lat,
+				Value:     setting.ScreenMap.MinValue,
+			})
+		} else if value.Type == AI_CENTER {
+
+			aiCenterLocationInfos[value.Type] = append(aicenterArray, &cloudbrainService.AiCenterLocationInfo{
+				Name:      cloudbrainService.GetAiCenterShowByAiCenterId(value.Name, ctx),
+				Longitude: long,
+				Latitude:  lat,
+				Value:     getAiCenterSize(value.Name, cardTimeMap, maxCardTime, 0),
+			})
+
+		}
+
+	}
+	sort.SliceStable(aiCenterLocationInfos[AI_CENTER], func(i, j int) bool {
+		return aiCenterLocationInfos[AI_CENTER][i].Value > aiCenterLocationInfos[AI_CENTER][j].Value
+	})
+
+	if setting.ScreenMap.ShowData || ctx.IsUserSiteAdmin() {
+
+		for _, cloudbrainCardTimeAndCountMap := range cloudbrainCardTimeAndCountArray {
+			centerId := cloudbrainCardTimeAndCountMap["ai_center"]
+			centerShow := cloudbrainService.GetAiCenterShowByAiCenterId(centerId, ctx)
+			cloudbrainCardTimeAndCountMap["ai_center"] = centerShow
+
+		}
+		ctx.JSON(http.StatusOK, map[string]interface{}{
+			"cardAndJobCount": cloudbrainCardTimeAndCountArray,
+			"locationInfo":    aiCenterLocationInfos,
+		})
+		return
+	}
+
+	ctx.JSON(http.StatusOK, map[string]interface{}{
+		"cardAndJobCount": []map[string]string{},
+		"locationInfo":    aiCenterLocationInfos,
+	})
+	return
+
+}
+
+func getAiCenterSize(name string, timeMap map[string]int64, MaxCardTime int64, MinCardTime int64) int {
+	cardTime, _ := timeMap[name]
+	if cardTime == 0 {
+		return setting.ScreenMap.MinValue
+	} else {
+		if MaxCardTime == MinCardTime {
+			return setting.ScreenMap.MaxValue
+		} else {
+			return int(float64(cardTime-MinCardTime)/float64(MaxCardTime-MinCardTime)*float64(setting.ScreenMap.MaxValue-setting.ScreenMap.MinValue)) + setting.ScreenMap.MinValue
+		}
+	}
+
+}
+
+func getLongLat(loc string) (string, string) {
+	longLat := strings.Split(loc, ",")
+	if len(longLat) != 2 {
+		return "", ""
+	}
+	return longLat[0], longLat[1]
+}
+
+func getCenterCardTimeInfo(cloudbrainCardTimeAndCountArray []map[string]string) (map[string]int64, int64, int64) {
+	var centerCardTimeMap = make(map[string]int64, len(cloudbrainCardTimeAndCountArray))
+	var maxCardTime int64 = 0
+	var minCardTime int64 = 0
+	for i, cloudbrainCardTimeAndCount := range cloudbrainCardTimeAndCountArray {
+
+		cardTime, _ := strconv.ParseInt(cloudbrainCardTimeAndCount["card_duration"], 10, 64)
+		if i == 0 {
+			maxCardTime = cardTime
+		}
+		if i == len(cloudbrainCardTimeAndCountArray)-1 {
+			minCardTime = cardTime
+		}
+		centerCardTimeMap[cloudbrainCardTimeAndCount["ai_center"]] = cardTime
+	}
+	return centerCardTimeMap, maxCardTime, minCardTime
+}
+
 func GetCloudbrainCardDuration(task models.Cloudbrain) string {
 	cardNum := int(0)
 	spec, err := resource.GetCloudbrainSpec(task.ID)

routers/home.go

@@ -55,6 +55,8 @@ const (
 	tplRepoSquare                 base.TplName = "explore/repos/square"
 	tplRepoSearch                 base.TplName = "explore/repos/search"
 	tplRoshmci                    base.TplName = "explore/ros-hmci"
+
+	tplExploreCenterMap base.TplName = "explore/center_map"
 )
 
 // Home render home page
@@ -541,6 +543,11 @@ func ExploreDatasetsUI(ctx *context.Context) {
 	ctx.HTML(200, tplExploreDataset)
 }
 
+func CenterMapUI(ctx *context.Context) {
+
+	ctx.HTML(200, tplExploreCenterMap)
+}
+
 func getDatasetOrderBy(ctx *context.Context) models.SearchOrderBy {
 	var orderBy models.SearchOrderBy
 	switch ctx.Query("sort") {

routers/private/internal.go

@@ -59,6 +59,7 @@ func RegisterRoutes(m *macaron.Macaron) {
 		m.Post("/repos/cnt_stat/handle_historical_task", admin.RefreshHistorySpec)
 		m.Post("/duration_statisctic/history_handle", repo.CloudbrainUpdateHistoryData)
 		m.Post("/square/repo/stat/refresh", repository.RefreshRepoStatData)
+		m.Get("/setting/refresh", RefreshSetting)
 
 	}, CheckInternalToken)
 }

routers/private/setting.go

@@ -0,0 +1,17 @@
+package private
+
+import (
+	"code.gitea.io/gitea/modules/setting"
+	"gitea.com/macaron/macaron"
+)
+
+func RefreshSetting(ctx *macaron.Context) {
+
+	setting.Cfg.Reload()
+	setting.NewScreenMapConfig()
+	setting.GetGrampusConfig()
+	setting.GetModelartsConfig()
+	setting.GetModelartsCDConfig()
+	ctx.PlainText(200, []byte("success"))
+
+}

routers/routes/routes.go

@@ -428,6 +428,7 @@ func RegisterRoutes(m *macaron.Macaron) {
 		m.Get("/data_analysis/ProTrend", routers.ExploreDataAnalysisProTrend)
 		m.Get("/data_analysis/Overview", routers.ExploreDataAnalysisOverview)
 		m.Get("/data_analysis/BrainAnalysis", routers.ExploreDataAnalysisBrainAnalysis)
+		m.Get("/center_map", reqSignIn, routers.CenterMapUI)
 
 	}, ignSignIn)
 	m.Combo("/install", routers.InstallInit).Get(routers.Install).

services/cloudbrain/aicenter.go

@@ -0,0 +1,80 @@
+package cloudbrain
+
+import (
+	"net/http"
+	"strconv"
+	"strings"
+
+	"code.gitea.io/gitea/modules/setting"
+
+	"code.gitea.io/gitea/services/ipinfo"
+
+	"code.gitea.io/gitea/models"
+	"code.gitea.io/gitea/modules/context"
+	"code.gitea.io/gitea/modules/log"
+)
+
+type AiCenterLocationInfo struct {
+	Name      string `json:"name"`
+	Value     int    `json:"value"`
+	Longitude string `json:"longitude"`
+	Latitude  string `json:"latitude"`
+}
+
+type CloudBrainLocationInfo struct {
+	DisplayJobName string `json:"job_name"`
+	FromLongitude  string `json:"from_longitude"`
+	FromLatitude   string `json:"from_latitude"`
+	ToLongitude    string `json:"to_longitude"`
+	ToLatitude     string `json:"to_latitude"`
+}
+
+func GetCloudbrainLocationInfo(ctx *context.Context) {
+	var locationInfos = make([]*CloudBrainLocationInfo, 0)
+	cloudbrains, err := models.GetLastestNCloudbrain(20)
+	if err != nil {
+		log.Error("can not get cloudbrain info", err)
+		ctx.JSON(http.StatusOK, locationInfos)
+		return
+	}
+	var userCenterMap = make(map[string]string, 0)
+
+	for _, cloudbrain := range cloudbrains {
+		key := strconv.FormatInt(cloudbrain.UserID, 10) + "_" + strconv.Itoa(cloudbrain.Type) + "_" + cloudbrain.AiCenter
+
+		if _, ok := userCenterMap[key]; ok {
+			continue
+		} else {
+			userCenterMap[key] = ""
+		}
+
+		ip := models.GetIpByUID(cloudbrain.UserID)
+		if ip != "" {
+			ipLocation := ipinfo.GetLocationByIp(ip)
+			aicenter := cloudbrain.GetAiCenter()
+
+			if ipLocation.Latitude != "" && aicenter != "" {
+				if value, ok := setting.AiCenterCodeAndNameAndLocMapInfo[aicenter]; ok {
+					longLat := strings.Split(value.Loc, ",")
+					cloudBrainLocationInfo := &CloudBrainLocationInfo{
+						DisplayJobName: cloudbrain.DisplayJobName,
+						FromLongitude:  ipLocation.Longitude,
+						FromLatitude:   ipLocation.Latitude,
+						ToLatitude:     longLat[1],
+						ToLongitude:    longLat[0],
+					}
+					if len(locationInfos) == 10 {
+						break
+					}
+					locationInfos = append(locationInfos, cloudBrainLocationInfo)
+				}
+
+			}
+
+		}
+
+	}
+
+	ctx.JSON(http.StatusOK, locationInfos)
+
+}

services/cloudbrain/util.go

@@ -6,18 +6,30 @@ import (
 	"strings"
 	"time"
 
-
 	"code.gitea.io/gitea/models"
 	"code.gitea.io/gitea/modules/context"
 	"code.gitea.io/gitea/modules/setting"
 )
 
+func GetAiCenterShowByAiCenterId(aiCenterId string, ctx *context.Context) string {
+	if setting.AiCenterCodeAndNameAndLocMapInfo != nil {
+		if info, ok := setting.AiCenterCodeAndNameAndLocMapInfo[aiCenterId]; ok {
+			if ctx.Language() == "zh-CN" {
+				return info.Content
+			} else {
+				return info.ContentEN
+			}
+		}
+	}
+	return aiCenterId
+}
+
 func GetAiCenterShow(aiCenter string, ctx *context.Context) string {
 	aiCenterInfo := strings.Split(aiCenter, "+")
 
 	if len(aiCenterInfo) == 2 {
-		if setting.C2NetMapInfo != nil {
-			if info, ok := setting.C2NetMapInfo[aiCenterInfo[0]]; ok {
+		if setting.AiCenterCodeAndNameAndLocMapInfo != nil {
+			if info, ok := setting.AiCenterCodeAndNameAndLocMapInfo[aiCenterInfo[0]]; ok {
 				if ctx.Language() == "zh-CN" {
 					return info.Content
 				} else {
@@ -60,8 +72,8 @@ func jobNamePrefixValid(s string) string {
 }
 
 func GetAiCenterInfoByCenterCode(aiCenterCode string) *setting.C2NetSequenceInfo {
-	if setting.AiCenterCodeAndNameMapInfo != nil {
-		if info, ok := setting.AiCenterCodeAndNameMapInfo[aiCenterCode]; ok {
+	if setting.AiCenterCodeAndNameAndLocMapInfo != nil {
+		if info, ok := setting.AiCenterCodeAndNameAndLocMapInfo[aiCenterCode]; ok {
 			return info
 		} else {
 			return nil

services/ipinfo/ipinfo.go

@@ -0,0 +1,38 @@
+package ipinfo
+
+import (
+	"strings"
+
+	"code.gitea.io/gitea/models"
+	"code.gitea.io/gitea/modules/ipinfo"
+	"code.gitea.io/gitea/modules/log"
+)
+
+func GetLocationByIp(ip string) *models.IPLocation {
+
+	ipLocation, err := models.GetIpLocation(ip)
+
+	if err != nil {
+		if !models.IsErrRecordNotExist(err) {
+			log.Error("can not get ip locatin from db", err)
+		}
+
+		ipInfoRes, err := ipinfo.GetLocationByIp(ip)
+
+		ipLocationTemp := &models.IPLocation{
+			IpAddr: ip,
+		}
+		if err != nil || ipInfoRes.Bogon || ipInfoRes.Loc == "" {
+			return ipLocationTemp
+		}
+		latLongArray := strings.Split(ipInfoRes.Loc, ",")
+		ipLocationTemp.Latitude = latLongArray[0]
+		ipLocationTemp.Longitude = latLongArray[1]
+		models.CreateIPLocation(ipLocationTemp)
+		return ipLocationTemp
+
+	} else {
+		return ipLocation
+	}
+
+}

templates/base/footer.tmpl

@@ -46,109 +46,110 @@
 	<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
 {{template "custom/footer" .}}
-{{if .PageIsHome}}
-	<!--script src="https://www.jq22.com/jquery/jquery-1.10.2.js?v={{MD5 AppVer}}"></script-->
-	<script src="/rotation3D/vue-2.6.10.min.js?v={{MD5 AppVer}}"></script>
-	<script src="/rotation3D/rotation3D.js?v={{MD5 AppVer}}"></script>
-	<script>
-	    var jobTask={};
-		var html =document.documentElement;
-		var lang = html.attributes["lang"]
-		var isZh = true;
-		if(lang != null && lang.nodeValue =="en-US" ){
-    		isZh=false;
-		}
-	    function queryAiCenterInfo(){
-			$.ajax({
-				type:"GET",
-				url:"/api/v1/cloudbrain/get_newest_job",
-				headers: {
-					authorization:token,
-				},
-				dataType:"json",
-				async:false,
-				success:function(json){
-					for(var i=0;i < json.length;i++){
-						jobTask[json[i].ai_center_id] =json[i].job_name;
-					}
-				},
-				error:function(response) {
-				    console.log("query task info error.");
-				}
-			});
+{{if .PageIsHome}}	
 
-			$.ajax({
-				type:"GET",
-				url:"/api/v1/cloudbrain/get_center_info",
-				headers: {
-					authorization:token,
-				},
-				dataType:"json",
-				async:false,
-				success:function(json){
-					displayAiCenterInfo(json);
-				},
-				error:function(response) {
-				}
-			});
-		}
-		function displayAiCenterInfo(json){
-			for(var i=0;i<json.length;i++){
-				var tmp ={};
-				tmp["name"]=json[i].name;
-				if(jobTask[json[i].id] != null){
-					tmp["type"]="blue";
-				}else{
-					tmp["type"]="green";
-				}
-				tmp["icon"]="";
-				if(isZh){
-					tmp["content"]=json[i].content;
-				}else{
-					tmp["content"]=json[i].content_en;
-				}
-				serverItemList.push(tmp);
-			}
-		}
+	<!--script src="https://www.jq22.com/jquery/jquery-1.10.2.js?v={{MD5 AppVer}}"></script-->	
+	<script src="/rotation3D/vue-2.6.10.min.js?v={{MD5 AppVer}}"></script>	
+	<script src="/rotation3D/rotation3D.js?v={{MD5 AppVer}}"></script>	
+	<script>	
+		console.log("a")	
+	    var jobTask={};	
+		var html =document.documentElement;	
+		var lang = html.attributes["lang"]	
+		var isZh = true;	
+		if(lang != null && lang.nodeValue =="en-US" ){	
+    		isZh=false;	
+		}	
+	    function queryAiCenterInfo(){	
+			$.ajax({	
+				type:"GET",	
+				url:"/api/v1/cloudbrain/get_newest_job",	
+				headers: {	
+					authorization:token,	
+				},	
+				dataType:"json",	
+				async:false,	
+				success:function(json){	
+					for(var i=0;i < json.length;i++){	
+						jobTask[json[i].ai_center_id] =json[i].job_name;	
+					}	
+				},	
+				error:function(response) {	
+				    console.log("query task info error.");	
+				}	
+			});	
 
-		var serverItemList=[];
-		queryAiCenterInfo();
-		var app = new Vue({
-			el: "#app",
-			//数据 blue, green, yellow
-			data: {
-				itemList:serverItemList,
-			},
-			mounted: function () {
-				new Rotation3D({
-					id: '#rotation3D',
-					farScale: 0.6,
-					// farScale: 1,
-					xRadius: 0,  //x半径压缩
-					yRadius: 130,  //y半径压缩
-					// yRadius: 0,  //y半径压缩
-					// autoPlay:true,
-					// autoPlayDelay:6000,
-				})
-	
-			},
-			methods: {},
-		});
-		$(document).ready(function(){
-			var pArrays=$('.itemList').find("p");
-			for(var i=0;i<pArrays.length;i++){
-				var p = pArrays[i];
-				p.innerText=serverItemList[i].content;
-			}
-			var lines=$('.lineList').find("span");
-			for(var i=0; i< lines.length;i++){
-				if(jobTask[i+1] != null){
-					lines[i].innerText = jobTask[i+1];
-				}
-			}
-		});
-	</script>
-{{end}}
+			$.ajax({	
+				type:"GET",	
+				url:"/api/v1/cloudbrain/get_center_info",	
+				headers: {	
+					authorization:token,	
+				},	
+				dataType:"json",	
+				async:false,	
+				success:function(json){	
+					displayAiCenterInfo(json);	
+				},	
+				error:function(response) {	
+				}	
+			});	
+		}	
+		function displayAiCenterInfo(json){	
+			for(var i=0;i<json.length;i++){	
+				var tmp ={};	
+				tmp["name"]=json[i].name;	
+				if(jobTask[json[i].id] != null){	
+					tmp["type"]="blue";	
+				}else{	
+					tmp["type"]="green";	
+				}	
+				tmp["icon"]="";	
+				if(isZh){	
+					tmp["content"]=json[i].content;	
+				}else{	
+					tmp["content"]=json[i].content_en;	
+				}	
+				serverItemList.push(tmp);	
+			}	
+		}	
 
+		var serverItemList=[];	
+		queryAiCenterInfo();	
+		var app = new Vue({	
+			el: "#app",	
+			//数据 blue, green, yellow	
+			data: {	
+				itemList:serverItemList,	
+			},	
+			mounted: function () {	
+				new Rotation3D({	
+					id: '#rotation3D',	
+					farScale: 0.6,	
+					// farScale: 1,	
+					xRadius: 0,  //x半径压缩	
+					yRadius: 130,  //y半径压缩	
+					// yRadius: 0,  //y半径压缩	
+					// autoPlay:true,	
+					// autoPlayDelay:6000,	
+				})	
+		
+			},	
+			methods: {},	
+		});	
+		$(document).ready(function(){	
+			var pArrays=$('.itemList').find("p");	
+			for(var i=0;i<pArrays.length;i++){	
+				var p = pArrays[i];	
+				p.innerText=serverItemList[i].content;	
+			}	
+			var lines=$('.lineList').find("span");	
+			for(var i=0; i< lines.length;i++){	
+				if(jobTask[i+1] != null){	
+					lines[i].innerText = jobTask[i+1];	
+				}	
+			}	
+		});	
+	</script>	
+{{end}}
 </body>
 </html>

templates/base/footer_content.tmpl

@@ -1,13 +1,3 @@
-<style>
-@media only screen and (max-width: 767px) {
-  .mobile-text-align-center {
-    text-align: center !important;
-  }
-  .mobile-justify-content-center {
-    justify-content: center !important;
-  }
-}
-</style>
 <footer style="border-top:none;">
 	<div class="ui container">
 		<div class="ui grid">
@@ -73,13 +63,6 @@
 					</div>
 				</div>
 			</div>
-			<style>
-				.contacts-qr-code-c {
-					margin:2.0rem 0;
-					display:flex !important;
-					justify-content:flex-end;
-				}
-			</style>
 			<div class="sixteen wide mobile wide tablet six wide computer column contacts-qr-code-c mobile-justify-content-center">
 				<div style="text-align:center;">
 					<div  style="width:80px;height:80px;display:inline-block;

templates/base/head_home.tmpl

@@ -187,7 +187,7 @@
 <!-- Swiper -->
 <link rel="stylesheet" href="/swiper/swiper-bundle.min.css?v={{MD5 AppVer}}">
 <script src="/swiper/swiper-bundle.min.js?v={{MD5 AppVer}}"></script>
-<!-- rotation3D -->
+<!-- rotation3D -->	
 <link rel="stylesheet" href="/rotation3D/rotation3D.css?v={{MD5 AppVer}}">
 <script>
 var _hmt = _hmt || [];

templates/custom/home/home_activity.tmpl

@@ -1,29 +1,3 @@
-<style>
-.homeactivity {
-  padding-top: 5rem;
-  padding-bottom: 6rem;
-  overflow: hidden;
-}
-.homeactivity .card {
-  width: 360px !important;
-  height: 160px !important;
-}
-.homeactivity img {
-  width: 100% !important;
-  height: 100% !important;
-}
-.homeactivity .image-name {
-  font-size: 14px;
-  color: rgb(16, 16, 16);
-  text-align: center;
-  margin-top: 0.8em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 20px;
-  box-sizing: border-box;
-  white-space: nowrap;
-}
-</style>
  <div class="ui container homeactivity _hm-container">
     <div class="ui center homepro-tit am-mb-20">
       <h2>{{.page_recommend_activity}}</h2>

templates/custom/home/home_dataset.tmpl

@@ -1,85 +1,17 @@
-<style>
-  .homedataset {
-    padding-top: 4em;
-    padding-bottom: 4em;
-  }    
-  .home-dataset-list {    
-    position: relative;
-    z-index: 9;
-    padding: 0em 1em 3em;
-    overflow: hidden;
-  }
-  .home-dataset-list .swiper-slide {
-    padding-top: 5px;
-  }
-  .home-dataset-list .dataset-card {
-    height: 130px;
-    width: 130px;
-    border: 1px solid rgba(157, 197, 226, 0.4);    
-    box-shadow: rgb(157 197 226 / 20%) 0px 5px 10px 0px;
-    color: rgb(16, 16, 16);
-    border-radius: 6px;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;    
-    transition: all 0.1s;
-  }
-  .home-dataset-list .dataset-card:hover {
-    transform: translateY(-3px);
-  }
-  .home-dataset-list .dataset-card>div {
-    width:100%;
-    display: flex;   
-    justify-content: center;
-  }
-  .home-dataset-list .dataset-card .content {
-    width:100%;   
-    overflow: hidden;    
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: center;
-    padding: 0 10px;
-  }
-  .home-dataset-list .dataset-card .icon-c {   
-    font-size: 14px;
-    color: #101010;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-  .home-dataset-list .dataset-card .label {
-    font-size: 14px;
-    color: #101010;
-    margin-bottom: 8px;
-  }
-  .home-dataset-list .dataset-card .svg.fill:not([stroke]) {
-    fill: url(#ila93em9ydx6bi61,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs);
-  }
-  .home-dataset-list .dataset-card .svg.fill:not([fill]) {
-    fill: url(#ila93em9ydx6bi61,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs);
-  }
-  .home-dataset-list .dataset-card .count {
-    font-size:12px;
-    color:rgb(136,136,136);
-  }
-  .home-dataset-list .swiper-pagination-bullet-active {
-    width: 40px;
-    border-radius: 4px;
-  }
-</style>
-<div class="ui container homedataset _hm-container">
-  <div class="ui stackable grid">
-    <div class="sixteen wide tablet four wide computer column mobile-text-align-center">
-      <h2>{{.i18n.Tr "home.search_dataset"}}</h2>
-      <p><span class="ui text grey">{{.i18n.Tr "home.datasets_descr"}}&nbsp;</span><a href="/explore/datasets">{{.i18n.Tr "home.search_dataset"}}</a></p>
-    </div>
-    <div class="sixteen wide tablet twelve wide computer column">
-      <div class="home-dataset-list">
-        <div class="swiper-wrapper" id="home_dataset"></div>
-        <div class="swiper-pagination"></div>
+<div style="width:100%;">
+  <div class="ui container homedataset _hm-container">
+    <div class="ui stackable grid">
+      <div class="sixteen wide tablet four wide computer column mobile-text-align-center">
+        <h2>{{.i18n.Tr "home.search_dataset"}}</h2>
+        <p><span class="ui text grey">{{.i18n.Tr "home.datasets_descr"}}&nbsp;</span><a href="/explore/datasets">{{.i18n.Tr "home.search_dataset"}}</a></p>
       </div>
-    </div>
-  </div>        
+      <div class="sixteen wide tablet twelve wide computer column">
+        <div class="home-dataset-list">
+          <div class="swiper-wrapper" id="home_dataset"></div>
+          <div class="swiper-pagination"></div>
+        </div>
+      </div>
+    </div>        
+  </div>
 </div>
+

templates/custom/home/home_repo.tmpl

@@ -1,8 +1,3 @@
-<style>
-.homepro-bg {
-   background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.013999999999999973%2C%201.0040000000000002%2C%20-0.1807553452932099%2C%200.013999999999999973%2C%200.374%2C%20-0.007)%22%3E%3Cstop%20stop-color%3D%22%23eee9da%22%20stop-opacity%3D%220.2%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23f3e7f7%22%20stop-opacity%3D%220.26%22%20offset%3D%220.29%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23d0e7ff%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-}
-</style>
 <div class="homepro-bg">
   <div class="ui container homepro _hm-container" style="padding-top:4rem;padding-bottom:3rem;">
     <div class="ui stackable grid">

templates/custom/home/home_screen_map.tmpl

@@ -0,0 +1,13 @@
+<div style="position: relative;margin-bottom: -80px;">
+    <div class="ui center am-pt-30 am-pb-30" style="position:absolute;z-index:5;padding-bottom:2.5rem !important;width: 100%;">
+        <h2>{{.i18n.Tr "home.c2net_title"}}</h2>
+        <p><span class="ui text grey">{{.i18n.Tr "home.c2net_desc"}}</p>
+        <div style="display:flex;align-items:center;justify-content:center;">
+            <a style="border:1px solid rgb(0, 123, 255);color:rgb(0, 123, 255);margin-right:10px;padding: 4px 10px;" href="https://openi.pcl.ac.cn/C2NET/C2NET/src/branch/master/%E6%A0%87%E5%87%86%E8%A7%84%E5%88%92.md">{{.i18n.Tr "home.c2net_standards"}}</a>
+            <a style="border:1px solid rgb(0, 123, 255);color:rgb(0, 123, 255);margin-left:10px;padding: 4px 10px;" href="https://openi.pcl.ac.cn/C2NET/C2NET/src/branch/master/%e6%99%ba%e7%ae%97%e7%bd%91%e7%bb%9c%e6%8a%80%e6%9c%af.md">{{.i18n.Tr "home.c2net_technology"}}</a>
+        </div>
+    </div>
+    <div id="__vue-root"></div>
+</div>
+<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=MSRIap3Scat9FPicR8TekAsA8uyvaWSE"></script>
+<script src="{{StaticUrlPrefix}}/js/vp-screen-map.js?v={{MD5 AppVer}}"></script>

templates/custom/home/home_top.tmpl

@@ -1,1545 +1,3 @@
-<style>
-  @media (min-width: 100px) and (max-width: 1199.99px) {
-    #homenews {
-      top: -1100px !important;
-    }
-  }
-  @media (min-width: 1320px) and (max-width: 1599.99px) {
-    ._hm-container {
-      width: 1200px !important;
-    }
-  }
-
-  @media only screen and (min-width: 1600px) {
-    ._hm-container {
-      width: 1440px !important;
-    }
-  }
-
-  @keyframes _hm-swing {
-    20% {
-      transform: rotate3d(0, 0, 1, 15deg);
-    }
-
-    40% {
-      transform: rotate3d(0, 0, 1, -10deg);
-    }
-
-    60% {
-      transform: rotate3d(0, 0, 1, 5deg);
-    }
-
-    80% {
-      transform: rotate3d(0, 0, 1, -5deg);
-    }
-
-    to {
-      transform: rotate3d(0, 0, 1, 0deg);
-    }
-  }
-
-  ._hm-swing {
-    transform-origin: top center;
-    animation-name: _hm-swing;
-  }
-
-  @keyframes _hm-shake {
-
-    from,
-    to {
-      transform: translate3d(0, 0, 0);
-    }
-
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-      transform: translate3d(-10px, 0, 0);
-    }
-
-    20%,
-    40%,
-    60%,
-    80% {
-      transform: translate3d(10px, 0, 0);
-    }
-  }
-
-  ._hm-shake {
-    animation-name: _hm-shake;
-  }
-
-  @keyframes _hm-slide-up {
-
-    from {
-      transform: translate3d(0, 0, 0);
-    }
-
-    5% {
-      transform: translate3d(0, 0, 0);
-    }
-
-    50% {
-      transform: translate3d(0, -90%, 0);
-    }
-
-    to {
-      transform: translate3d(0, -90%, 0);
-    }
-  }
-
-  ._hm-slide-up {
-    animation-duration: 10s;
-    animation-iteration-count: infinite;
-    animation-name: _hm-slide-up;
-  }
-
-  @keyframes _hm-fade-out {
-    from {
-      opacity: 0;
-    }
-
-    50% {
-      opacity: 1;
-    }
-
-    70% {
-      opacity: 1;
-    }
-
-    80% {
-      opacity: 1;
-    }
-
-    90% {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-
-  ._hm-fade-out {
-    animation-duration: 16s;
-    animation-iteration-count: infinite;
-    animation-name: _hm-fade-out;
-    animation-delay: 1.2s;
-  }
-
-  @keyframes _hm-change-bg {
-    from {
-      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-    }
-
-    45% {
-      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-    }
-
-    50% {
-      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-    }
-
-    95% {
-      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-    }
-
-    to {
-      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-    }
-  }
-
-  ._hm-change-bg {
-    animation-duration: 16s;
-    animation-iteration-count: infinite;
-    animation-name: _hm-change-bg;
-  }
-
-  @keyframes _hm-show-section-1 {
-    from {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    45% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    45.01%,
-    95% {
-      opacity: 0;
-      transform: translateX(-1000%);
-    }
-
-    95.01% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  ._hm-show-section-1 {
-    animation-duration: 16s;
-    animation-iteration-count: infinite;
-    animation-name: _hm-show-section-1;
-  }
-
-  @keyframes _hm-show-section-2 {
-    from {
-      opacity: 0;
-      transform: translateX(-1000%);
-    }
-
-    45% {
-      opacity: 0;
-      transform: translateX(-1000%);
-    }
-
-    45.01%,
-    95% {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    95.01% {
-      opacity: 0;
-      transform: translateX(-1000%);
-    }
-
-    to {
-      opacity: 0;
-      transform: translateX(-1000%);
-    }
-  }
-
-  ._hm-show-section-2 {
-    animation-duration: 16s;
-    animation-iteration-count: infinite;
-    animation-name: _hm-show-section-2;
-  }
-
-  @keyframes _hm-slide-in-left-once {
-    from {
-      transform: translateX(-100%);
-    }
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes _hm-slide-in-right-once {
-    from {
-      transform: translateX(100%);
-    }
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes _hm-slide-in-left {
-    from {
-      opacity: 1;
-    }
-
-    5% {
-      transform: translateX(0);
-    }
-
-    45% {
-      opacity: 1;
-    }
-
-    45.01%,
-    95% {
-      opacity: 0;
-      transform: translateX(0);
-    }
-
-    95.01% {
-      opacity: 1;
-      transform: translateX(-100%);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  ._hm-slide-in-left {
-    animation-duration: 16s;
-    animation-iteration-count: infinite;
-    animation-name: _hm-slide-in-left;
-    animation-fill-mode: forwards;
-  }
-
-  @keyframes _hm-slide-in-right {
-    from {
-      opacity: 0;
-    }
-
-    45% {
-      opacity: 0;
-
-    }
-
-    45.01% {
-      transform: translateX(100%);
-      opacity: 1;
-    }
-
-    50% {
-      transform: translateX(0);
-      opacity: 1;
-    }
-
-    95% {
-      opacity: 1;
-    }
-
-    95.01% {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-
-  ._hm-slide-in-right {
-    animation-duration: 16s;
-    animation-iteration-count: infinite;
-    animation-name: _hm-slide-in-right;
-    animation-fill-mode: forwards
-  }
-
-  @keyframes _hm-bounce-in-up {
-
-    0%,
-    60%,
-    75%,
-    90%,
-    100% {
-      transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
-    }
-
-    0% {
-      opacity: 0;
-      transform: translate3d(0, 3000px, 0);
-    }
-
-    60% {
-      opacity: 1;
-      transform: translate3d(0, -25px, 0);
-    }
-
-    75% {
-      transform: translate3d(0, 10px, 0);
-    }
-
-    90% {
-      transform: translate3d(0, -5px, 0);
-    }
-
-    100% {
-      transform: none;
-    }
-  }
-
-  ._hm-bounce-in-up {
-    animation-name: _hm-bounce-in-up
-  }
-
-  @keyframes _hm-ani-bubble-c {
-    from {
-      opacity: 1;
-    }
-
-    20% {
-      opacity: 1;
-    }
-
-    30% {
-      opacity: 1;
-    }
-
-    40%,
-    50%,
-    90% {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  ._hm-ani-bubble-c {
-    animation-name: _hm-ani-bubble-c;
-    animation-duration: 20s;
-    animation-iteration-count: infinite;
-    animation-delay: 1s;
-  }
-
-  ._hm-transition-common {
-    transition: all 500ms linear 0s, z-index 0s linear 0s;
-  }
-
-  ._hm-bg-container {
-    overflow: hidden;
-    position: relative;
-    height: 580px;    
-  }
-
-  ._hm-pg-static {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-  }
-
-  ._hm-pg {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    display: none;
-  }
-
-  ._hm-pg-show {
-    display: block;
-  }
-
-  ._hm-pg-hide {
-    display: none;
-  }
-
-  ._hm-pg-bg-1 {
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-pg-bg-2 {
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");    
-  }
-  ._hm-pg-bg-3-placeholder-1 {
-    position: absolute;
-    width: 100%;
-    height: 51%;
-    top: 0;
-    left: 0;
-    background-color: #2e035f;
-    display: none;
-  }
-  ._hm-pg-bg-3-placeholder-2 {
-    position: absolute;
-    height: 50%;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    display: none;
-  }
-  ._hm-pg-bg-3 {
-    background: url("/img/home-banner-01.jpg");    
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-  }
-  ._hm-pg-bg-3-en {
-    background: url("/img/home-banner-01-en.jpg");    
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: cover;
-  }
-
-  ._hm-slide-btn {
-    position: absolute;
-    z-index: 30;
-    color: white;
-    height: 30px;
-    width: 30px;
-    border: 1px solid rgba(255,255,255,0.6);
-    box-sizing: border-box;
-    top: 50%;
-    transform: translateY(-50%) rotate(-45deg) ;
-    cursor: pointer;
-    padding: 5px;
-  }
-
-  ._hm-slide-btn-left {
-    left: 30px;    
-    border-right: none;
-    border-bottom: none;    
-  }
-
-  ._hm-slide-btn-right {
-    right: 30px;
-    border-top: none;
-    border-left: none;  
-  }
-
-  ._hm-slide-pagination-c {
-    display: none;
-    position: absolute;
-    z-index: 30;
-    text-align: center;
-    height: 30px;
-    width: 100%;
-    bottom: 0;
-  }
-
-  ._hm-slide-pagination-item {
-    display: inline-block;
-    width: 8px;
-    height: 8px;    
-    background: rgb(185, 227, 244);
-    border-radius: 100%;
-    margin: 0 2px;
-    cursor: pointer;
-  }
-  ._hm-slide-pagination-item-active {
-    width: 40px;
-    border-radius: 4px;    
-    cursor: default;
-  }
-
-  ._hm-circle {
-    position: absolute;
-    top: 180px;
-    left: 70%;
-    z-index: 1;
-    opacity: 0.9;
-    transform-origin: 73px 73px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 146px;
-    height: 146px;
-    border-width: 0px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.6710000000000002%2C%20-0.8079999999999999%2C%200.8079999999999999%2C%20-0.6710000000000002%2C%201%2C%201)%22%3E%3Cstop%20stop-color%3D%22%2390fe9f%22%20stop-opacity%3D%220.6%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235b52f8%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-circle-rect {
-    position: absolute;
-    top: 400px;
-    left: 55%;
-    opacity: 0.9;
-    transform-origin: 632px 430px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 1264px;
-    height: 860px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.5890000000000002%2C%20-0.6789999999999998%2C%200.3177778954194038%2C%20-0.5954790000000001%2C%200.749%2C%200.847)%22%3E%3Cstop%20stop-color%3D%22%2390fe9f%22%20stop-opacity%3D%220%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2302cafd%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-bubble-c {
-    position: absolute;
-    height: 1px;
-    width: 100%;
-    left: 0;
-    bottom: -90px;    
-    z-index: 3;
-    opacity: 0.8;
-  }
-
-  ._hm-bubble-1 {
-    position: absolute;
-    top: -474px;
-    left: 0px;
-    z-index: 9;
-    opacity: 0.9;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    width: 24px;
-    height: 24px;
-    border-radius: 100%;
-    transform: translate3d(0, 3000px, 0);
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-bubble-2 {
-    position: absolute;
-    top: -455px;
-    left: 45px;
-    z-index: 10;
-    opacity: 0.9;
-    transform-origin: 10px 10px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    transform: translate3d(0, 3000px, 0);
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-bubble-3 {
-    position: absolute;
-    top: -433px;
-    left: 6px;
-    z-index: 11;
-    opacity: 0.9;
-    transform-origin: 6px 6px;
-    animation-delay: 0.8s;
-    animation-duration: 2.4s;
-    animation-iteration-count: infinite;
-    width: 12px;
-    height: 12px;
-    border-radius: 100%;
-    transform: translate3d(0, 3000px, 0);
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-universe {
-    position: relative;
-    top: -20px;
-    left: 20%;
-  }
-
-  ._hm-universe-1 {
-    position: absolute;
-    top: 116px;
-    left: 22px;
-    z-index: 5;
-    opacity: 0.9;
-    transform-origin: 34px 34px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 68px;
-    height: 68px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.14099999999999993%2C%20-0.622%2C%200.622%2C%200.14099999999999993%2C%200.422%2C%200.631)%22%3E%3Cstop%20stop-color%3D%22%235c29ec%22%20stop-opacity%3D%220%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%237702f8%22%20stop-opacity%3D%220.1%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%220.5%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-universe-2 {
-    position: absolute;
-    top: 122px;
-    left: 0;
-    z-index: 6;
-    opacity: 0.9;
-    transform: rotate(19deg);
-    transform-origin: 56px 29px;
-    width: 112px;
-    height: 58px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.5617810274234694%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%23046af7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%220.1%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%220.3%22%20offset%3D%220.98%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-area {
-    position: relative;
-    top: -25px;
-    right: 10%;
-    z-index: 3;
-  }
-
-  ._hm-person {
-    position: absolute;
-    top: 211px;
-    /* left: 1073px; 277px; */
-    right: 12px;;
-    width: 265px;
-    height: 309px;
-    z-index: 3;
-    opacity: 1;
-    transform-origin: 132.5px 154.5px;
-    background-image: url("/img/home-bg-ps.png");
-    background-size: cover;
-  }
-
-  ._hm-person-ring-1 {
-    position: absolute;
-    top: 248px;
-    right: -73px;
-    z-index: 8;
-    opacity: 0.9;
-    transform: rotate(282deg);
-    transform-origin: 194.5px 101px;
-    width: 389px;
-    height: 202px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.5648727994660357%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%2304d1f7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%221%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fff2%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-ring-2 {
-    position: absolute;
-    top: 246px;
-    right: -95px;
-    z-index: 6;
-    opacity: 0.9;
-    transform: rotate(281deg);
-    transform-origin: 194px 106.5px;
-    width: 388px;
-    height: 213px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.6313103100621746%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%2304d1f7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300c9ff%22%20stop-opacity%3D%220.5%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23bc00ff%22%20stop-opacity%3D%220.21%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-ring-3 {  
-    position: absolute;
-    top: 285px;
-    right: -20px;
-    opacity: 0.9;
-    transform: rotate(282deg);
-    transform-origin: 141.5px 66px;
-    width: 283px; 
-    height: 132px; 
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.048999999999999905%2C%20-1.2400000000000002%2C%200.9760346574435941%2C%200.17728199999999966%2C%200.467%2C%201.034)%22%3E%3Cstop%20stop-color%3D%22%231e04f7%22%20stop-opacity%3D%220.39%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300aeff%22%20stop-opacity%3D%220.52%22%20offset%3D%220.73%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%239ff7f2%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-circle-1 {
-    position: absolute;
-    top: 35px;
-    right: 296px;
-    z-index: 5;
-    opacity: 0.9;
-    transform-origin: 73px 73px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 146px;
-    height: 146px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.5259999999999999%2C%20-0.45000000000000007%2C%200.45000000000000007%2C%20-0.5259999999999999%2C%200.648%2C%200.591)%22%3E%3Cstop%20stop-color%3D%22%239e02f9%22%20stop-opacity%3D%220.14%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230241f8%22%20stop-opacity%3D%220.23%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-circle-2 {
-    position: absolute;
-    top: 86px;
-    right: 396px;
-    z-index: 6;
-    opacity: 0.9;
-    transform-origin: 16.5px 16.5px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 33px;
-    height: 33px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.42500000000000004%2C%20-0.4099999999999999%2C%200.4099999999999999%2C%20-0.42500000000000004%2C%200.648%2C%200.591)%22%3E%3Cstop%20stop-color%3D%22%2376029f%22%20stop-opacity%3D%220.01%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23010664%22%20stop-opacity%3D%220.22%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-circle-3 {
-    position: absolute;
-    top: 121px;
-    right: 192px;
-    z-index: 15;
-    opacity: 0.9;
-    transform-origin: 20px 20px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 40px;
-    height: 40px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.524%2C%200.4450000000000001%2C%20-0.4450000000000001%2C%200.524%2C%200.339%2C%200.364)%22%3E%3Cstop%20stop-color%3D%22%235f00b4%22%20stop-opacity%3D%220.06%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23150bc4%22%20stop-opacity%3D%220.31%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-circle-4 {
-    position: absolute;
-    top: -39px;
-    right: -66px;
-    z-index: 2;
-    opacity: 0.9;
-    transform-origin: 121px 121px;
-    animation-delay: 0.5s;
-    animation-duration: 2.6s;
-    animation-iteration-count: infinite;
-    width: 242px; 
-    height: 242px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.6710000000000002%2C%20-0.8079999999999999%2C%200.8079999999999999%2C%20-0.6710000000000002%2C%200.495%2C%200.568)%22%3E%3Cstop%20stop-color%3D%22%2390edfe%22%20stop-opacity%3D%220.6%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235b52f8%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-star-1 {}
-
-  ._hm-person-star-1-1 {
-    position: absolute;
-    top: 101px;
-    right: 477px;
-    z-index: 6;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 7.5px 3.5px;
-    width: 15px;
-    height: 7px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-1-2 {
-    position: absolute;
-    top: 97px;
-    right: 475px;
-    z-index: 5;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 15.5px 3px;
-    width: 31px;
-    height: 6px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0023600416233090465%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-star-2 {}
-
-  ._hm-person-star-2-1 {
-    position: absolute;
-    top: 136px;
-    right: 388px;
-    z-index: 6;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 7.5px 3.5px;
-    width: 15px;
-    height: 7px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-2-2 {
-    position: absolute;
-    top: 132px;
-    right: 387px;
-    z-index: 5;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 15px 3px;
-    width: 30px;
-    height: 6px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.002519999999999994%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-star-3 {}
-
-  ._hm-person-star-3-1 {
-    position: absolute;
-    top: 289px;
-    right: 594px;
-    z-index: 6;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 6px 2.5px;
-    width: 12px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-3-2 {
-    position: absolute;
-    top: 285px;
-    right: 594px;
-    z-index: 5;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 11.5px 2.5px;
-    width: 23px;
-    height: 5px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0029773156899810887%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fef512%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fea712%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-star-4 {}
-
-  ._hm-person-star-4-1 {
-    position: absolute;
-    top: 448px;
-    right: -15px;
-    z-index: 6;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 7.5px 3.5px;
-    width: 15px;
-    height: 7px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-4-2 {
-    position: absolute;
-    top: 444px;
-    right: -17px;
-    z-index: 5;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 15.5px 3px;
-    width: 31px;
-    height: 6px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0023600416233090465%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-star-5 {}
-
-  ._hm-person-star-5-1 {
-    position: absolute;
-    top: 503px;
-    right: 101px;
-    z-index: 6;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 5.5px 2.5px;
-    width: 11px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-5-2 {
-    position: absolute;
-    top: 500px;
-    right: 101px;
-    z-index: 5;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 11px 2.5px;
-    width: 22px;
-    height: 5px;
-    border-radius: 100%;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0032541322314049497%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fef512%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fea712%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-person-star-6 {
-    position: absolute;
-    top: 515px;
-    right: 328px;
-    z-index: 23;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 4px 2.5px;
-    width: 8px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(0, 242, 255);
-  }
-
-  ._hm-person-star-7 {
-    position: absolute;
-    top: 349px;
-    right: 221px;
-    z-index: 24;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 2.5px 2.5px;
-    width: 5px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(0, 242, 255);
-  }
-
-  ._hm-person-star-8 {
-    position: absolute;
-    top: 456px;
-    right: 138px;
-    z-index: 25;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 4px 2.5px;
-    width: 8px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(0, 242, 255);
-  }
-
-  ._hm-person-star-9 {
-    position: absolute;
-    top: 345px;
-    right: 48px;
-    z-index: 26;
-    opacity: 1;
-    transform: rotate(48deg);
-    transform-origin: 4px 1.5px;
-    width: 8px;
-    height: 3px;
-    border-radius: 100%;
-    background: rgb(0, 242, 255);
-  }
-
-  ._hm-person-star-10 {
-    position: absolute;
-    top: 439px;
-    right: 347px;
-    z-index: 27;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 4.5px 2.5px;
-    width: 9px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(255, 255, 255);
-  }
-
-  ._hm-person-star-11 {
-    position: absolute;
-    top: 291px;
-    right: 20px;
-    z-index: 28;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 4.5px 2.5px;
-    width: 9px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(255, 255, 255);
-  }
-
-  ._hm-person-star-12 {
-    position: absolute;
-    top: 144px;
-    right: 333px;
-    z-index: 17;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 3px 2.5px;
-    width: 6px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(255, 255, 255);
-  }
-
-  ._hm-person-star-13 {
-    position: absolute;
-    top: 478px;
-    right: 220px;
-    z-index: 16;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 3px 2.5px;
-    width: 6px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-14 {
-    position: absolute;
-    top: 296px;
-    right: 377px;
-    z-index: 15;
-    opacity: 1;
-    transform: rotate(47deg);
-    transform-origin: 4px 1.5px;
-    width: 8px;
-    height: 3px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-15 {
-    position: absolute;
-    top: 321px;
-    right: 427px;
-    z-index: 14;
-    opacity: 1;
-    transform: rotate(47deg);
-    transform-origin: 9.5px 1.5px;
-    width: 19px;
-    height: 3px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-16 {
-    position: absolute;
-    top: 451px;
-    right: 470px;
-    z-index: 13;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 3px 2.5px;
-    width: 6px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-
-  }
-
-  ._hm-person-star-17 {
-    position: absolute;
-    top: 230px;
-    right: 128px;
-    z-index: 12;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 4px 2px;
-    width: 8px;
-    height: 4px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-18 {
-    position: absolute;
-    top: 564px;
-    right: 278px;
-    z-index: 11;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 4px 2.5px;
-    width: 8px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-19 {
-    position: absolute;
-    top: 504px;
-    right: 404px;
-    z-index: 10;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 4px 1.5px;
-    width: 8px;
-    height: 3px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-20 {
-    position: absolute;
-    top: 291px;
-    right: 68px;
-    z-index: 9;
-    opacity: 1;
-    transform: rotate(39deg);
-    transform-origin: 6px 2.5px;
-    width: 12px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-21 {
-    position: absolute;
-    top: 238px;
-    right: 48px;
-    z-index: 8;
-    opacity: 1;
-    transform: rotate(52deg);
-    transform-origin: 6px 2.5px;
-    width: 12px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-22 {
-    position: absolute;
-    top: 106px;
-    right: 161px;
-    z-index: 7;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 10px 2.5px;
-    width: 20px;
-    height: 5px;
-    border-radius: 100%;
-    background: rgb(254, 245, 18);
-  }
-
-  ._hm-person-star-23 {
-    position: absolute;
-    top: 387px;
-    right: 436px;
-    z-index: 6;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 2.5px 2px;
-    width: 5px;
-    height: 4px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-24 {
-    position: absolute;
-    top: 506px;
-    right: 65px;
-    z-index: 5;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 4px 2px;
-    width: 8px;
-    height: 4px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-25 {
-    position: absolute;
-    top: 269px;
-    right: 306px;
-    z-index: 4;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 7.5px 4px;
-    width: 15px;
-    height: 8px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-26 {
-    position: absolute;
-    top: 344px;
-    right: 262px;
-    z-index: 3;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 6px 3px;
-    width: 12px;
-    height: 6px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-27 {
-    position: absolute;
-    top: 417px;
-    right: 251px;
-    z-index: 2;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 11.5px 3px;
-    width: 23px;
-    height: 6px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-person-star-28 {
-    position: absolute;
-    top: 171px;
-    right: 13px;
-    z-index: 1;
-    opacity: 1;
-    transform: rotate(38deg);
-    transform-origin: 7.5px 4px;
-    width: 15px;
-    height: 8px;
-    border-radius: 100%;
-    background: rgb(250, 36, 249);
-  }
-
-  ._hm-txt-content-c {
-    position: relative;
-    top: 70px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 80%;
-    min-width: 300px;
-    max-width: 900px;
-    z-index: 10;
-  }
-
-  ._hm-big-txt-1,
-  ._hm-big-txt-2 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  ._hm-big-title {
-    text-align: center;
-    font-weight: 400;
-    font-size: 48px;
-    color: rgba(251, 251, 251, 1);
-    font-style: normal;
-    letter-spacing: 0px;
-    line-height: 53px;
-    text-decoration: none;
-    text-align: center;
-    margin-bottom: 38px;
-  }
-
-  ._hm-big-descr {
-    font-weight: 300;
-    font-size: 28px;
-    color: rgb(255, 255, 255);
-    font-style: normal;
-    letter-spacing: 0px;
-    line-height: 36px;
-    text-decoration: none;
-    text-align: center;
-    margin-bottom: 32px;
-  }
-
-  ._hm-big-btn-c {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 42px;
-    width: 200px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  ._hm-big-btn-c a {
-    text-decoration: none;
-    color: rgb(255, 255, 255);
-  }
-
-  ._hm-big-btn-1 {
-    width: 160px;
-    height: 48px;
-    border-style: none;
-    border-color: unset;
-    color: rgb(255, 255, 255);
-    border-radius: 40px;
-    font-size: 18px;
-    padding: 0px;
-    text-align: center;
-    font-weight: normal;
-    font-style: normal;
-    margin-right: 20px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;   
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22null%22%3E%3Cstop%20stop-color%3D%22%23db00ff%22%20stop-opacity%3D%221%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230075ff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-big-btn-2,
-  ._hm-big-btn-3 {
-    cursor: pointer;
-    width: 160px;
-    height: 40px;
-    border-color: rgb(251, 251, 251);
-    border-width: 1px;
-    border-style: solid;
-    color: rgb(255, 255, 255);
-    border-radius: 2px;
-    font-size: 14px;
-    padding: 0px;
-    text-align: center;
-    margin-right: 28px;
-    box-sizing: border-box;
-    background: transparent;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  ._hm-recommend-info {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    margin: 60px 0px;
-    flex-wrap: wrap;
-  }
-
-  ._hm-recommend-info-area {
-    height: 100%;
-    flex: 1;
-    margin: 20px;
-    display: flex;
-    position: relative;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    min-width: 240px;
-    height: 150px;
-  }
-
-  ._hm-recommend-info-area ._hm-link {
-    font-weight: 400;
-    font-size: 20px;
-    color: rgba(255, 255, 255, 1);
-    text-decoration: none;
-  }
-
-  ._hm-recommend-info-area ._hm-link:hover {
-    opacity: 0.8;
-  }
-
-  ._hm-recommend-info-area-1 {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: flex-start;
-    font-size: 14px;
-    color: rgba(16, 16, 16, 1);
-  }
-
-  ._hm-recommend-info-area-1 div {
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: left;
-  }
-
-  ._hm-recommend-info-area-1 div i {
-    vertical-align: -2px;
-  }
-
-  ._hm-recommend-info-area-1 a {
-    font-size: 14px;
-    color: rgb(16, 16, 16);
-    text-decoration: none;
-    font-weight: 400;
-  }
-
-  ._hm-recommend-info-area-1 a:hover {
-    opacity: 0.8;
-  }
-
-  ._hm-recommend-info-area-2 {
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.31499999999999984%2C%20-1.339%2C%200.23547450572320502%2C%200.31499999999999984%2C%200.5%2C%201.207)%22%3E%3Cstop%20stop-color%3D%22%231eb3c4%22%20stop-opacity%3D%220.91%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230ca451%22%20stop-opacity%3D%220.5%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-recommend-info-area-2-bg-1 {
-    position: absolute;
-    width: 42px;
-    height: 42px;
-    border-radius: 100%;
-    right: 10px;
-    top: 23px;
-    z-index: -1;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.3550000000000002%2C%200.765%2C%20-0.8018622448979591%2C%20-0.3550000000000002%2C%200.779%2C%200.021)%22%3E%3Cstop%20stop-color%3D%22%23c2ffd8%22%20stop-opacity%3D%220.1%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300a5b8%22%20stop-opacity%3D%220.6%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300a5b8%22%20stop-opacity%3D%220.2%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-recommend-info-area-2-bg-2 {
-    position: absolute;
-    width: 90px;
-    height: 90px;
-    border-radius: 100%;
-    left: 42%;
-    bottom: 2px;
-    z-index: -1;
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.3550000000000002%2C%200.765%2C%20-0.7321006616257089%2C%20-0.3550000000000002%2C%200.779%2C%200.021)%22%3E%3Cstop%20stop-color%3D%22%23c2ffd8%22%20stop-opacity%3D%220.1%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300b87e%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-recommend-info-area-3 {
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22null%22%3E%3Cstop%20stop-color%3D%22%23c7b4ec%22%20stop-opacity%3D%220.8%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23f78284%22%20stop-opacity%3D%220.9%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-
-  ._hm-recommend-info-area-4 {
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.08399999999999999%2C%201.412%2C%20-0.24831217481789805%2C%200.08399999999999999%2C%200.306%2C%20-0.053)%22%3E%3Cstop%20stop-color%3D%22%23f89277%22%20stop-opacity%3D%220.8%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235d32ff%22%20stop-opacity%3D%220.9%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-  #homenews {
-    position: absolute;
-    left: 0;     
-    width: 420px;
-    top: -328px;
-    z-index: 2;
-  }
-  .homenews {
-    background-color: transparent;
-  }
-  .homenews::before {
-    background-color: transparent;
-  }
-  .homenews .swiper-slide {
-  }
-  .homenews .swiper-slide .content-c {    
-    display: flex;
-    align-items: center;
-    padding-left: 5px;
-    height: 90%;
-    border-radius: 16px; 
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-  .homenews .swiper-slide .content {
-    color: white;
-  }
-
-  @media only screen and (max-width: 767px) {
-    ._hm-pg-bg-1 {      
-      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233b83fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");    
-      background-size: 1500px 700px;
-      background-position: center center;
-    }
-    ._hm-person-area {
-      display: none;
-    }
-    ._hm-bubble-c {
-      display: none;
-    }
-    #homenews {
-      display: none;
-    }
-    ._hm-universe {    
-      top: -70px;
-      left: 10%;
-    }
-    ._hm-big-descr {
-      font-size: 20px;
-    }
-    ._hm-big-btn-1 {
-      height: 56px;
-    }
-    ._hm-big-btn-2 {
-      width: 125px;
-      margin-right: 10px;
-    }
-    ._hm-circle-rect {
-      left: 0;
-    }
-    ._hm-pg-bg-3-placeholder-1 {
-      display: block;      
-    }
-    ._hm-pg-bg-3-placeholder-2 {
-      display: block;      
-      background: url(/img/home-banner-01.jpg);
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
-    }
-    ._hm-pg-bg-3-placeholder-2-en {
-      background: url(/img/home-banner-01-en.jpg);
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
-    }
-    ._hm-pg-bg-3 {
-      background: none;
-    }
-    ._hm-bg-descr-vedio-link {
-      display: block;      
-      margin-left: 0px !important;
-      margin-top: 10px;
-    }
-    ._hm-slide-btn {
-      display: none;
-    }   
-    ._hm-big-title-en {
-      font-size: 32px;
-      margin-bottom: 20px;      
-      margin-top: -32px;
-    }
-    ._hm-big-title-mobile-margin-top {
-      margin-top: -40px;
-      margin-bottom: 26px;
-    }
-    ._hm-big-title-mobile-margin-top-en {
-      margin-top: -50px;
-      margin-bottom: 8px;
-    }
-    ._hm-computing-net-container {
-      display: none !important;
-    }
-    ._hm-computing-net-mobile-container {
-      display: block !important;
-      background-image: url("/rotation3D/img/baseimg.png");
-      background-position: center center;     
-      background-repeat: no-repeat;
-      background-size: cover;
-      padding: 45% 0;
-    }    
-  }  
-</style>
 <div class="_hm-bg-container">
   <div class="_hm-pg _hm-pg-static"></div>
   <div class="_hm-pg-c">

templates/custom/home/home_user_experience.tmpl

@@ -1,118 +1,3 @@
-<style>
-  .homeuserexp-bg {  
-    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.04900000000000009%2C%201.104%2C%20-0.06118479166666667%2C%200.04900000000000009%2C%200.339%2C%20-0.107)%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.33%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23e5e7eb%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
-  }
-  .homeuserexp {
-    padding-top: 5em;
-    padding-bottom: 2em;
-  }
-
-  .homeuserexp .swiper-prev {
-    position: absolute;
-    top: 104px;
-    left: 14px;
-    z-index: 10;
-  }
-
-  .homeuserexp .swiper-next {
-    position: absolute;
-    top: 104px;
-    right: 14px;
-    z-index: 10;
-  }
-  
-  .homeuserexp .prev-next-i {    
-    font-size: 22px;
-    border: 1px solid rgb(0, 122, 255);
-    border-radius: 100%;
-    color: rgb(0, 122, 255);
-    cursor: pointer;
-  }
-  
-  .homeuserexp .swiper-prev.swiper-button-disabled .prev-next-i, .homeuserexp .swiper-next.swiper-button-disabled .prev-next-i {
-    opacity: 0.35;
-    cursor: default;
-  }
-
-  .home-user-exp-list {    
-    position: relative;
-    z-index: 9;
-    padding: 0em 1.2em 3em 1.2em;
-    overflow: hidden;
-  }
-
-  .home-user-exp-list .user-card {
-    width: 240px;
-    height: 180px;    
-    color: rgb(16, 16, 16);
-    border-radius: 6px;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-  
-  .home-user-exp-list .swiper-slide {
-    display: flex;
-    justify-content: center;
-  }
-
-  .home-user-exp-list .user-card>div {
-    width:100%;
-    display: flex;   
-    justify-content: center;
-  }
-
-  .home-user-exp-list .user-card .content {
-    width:100%;   
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: center;
-    padding: 0 10px;
-  }
-
-  .home-user-exp-list .user-card .img-c {   
-    font-size: 14px;
-    color: #101010;
-    display:flex;
-    justify-content: center;
-    align-items: center;   
-    height: 74px;
-    margin-bottom: 8px;
-  }
-
-  .home-user-exp-list .user-card .img {
-    border: 3px solid rgb(243, 240, 164);
-    border-radius: 100%;    
-    box-shadow: rgb(255 220 144) 0px 0px 0px 2px;
-    height: 60px;
-    width: 60px;
-    display: block;
-    background-size:cover;
-  }
-
-  .home-user-exp-list .user-card .label {
-    font-size: 14px;
-    color: #101010;
-    margin-bottom: 8px;
-    font-weight: 550;
-  }
-
-  .home-user-exp-list .user-card .descr {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    font-size:12px;
-    color:rgb(136,136,136);
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    max-height: 50px;
-    height: 40px;
-    white-space: break-spaces;
-  }
-</style>
 <div class="homeuserexp-bg">
   <div class="ui container homeuserexp _hm-container">
     <div class="ui stackable grid">

templates/explore/center_map.tmpl

@@ -0,0 +1,3 @@
+{{template "base/head_home" .}}
+{{template "custom/home/home_screen_map" .}}
+{{template "base/footer" .}}

templates/explore/organizations.tmpl

@@ -273,7 +273,4 @@ window.onload = function() {
 
 }
 
-</script>
-<style>
-
-</style>
+</script>

templates/home.tmpl

@@ -1,10 +1,7 @@
 {{template "base/head_home" .}}
-    <link rel="stylesheet" href="{{StaticUrlPrefix}}/css/placeholder-home.css?v={{TimeStampNow}}">
-    <script src="{{StaticUrlPrefix}}/js/placeholder-home.js?v={{TimeStampNow}}"></script>
     <div class="ui vertical masthead secondary hometop segment" style="background:transparent;margin-bottom:0">
         {{template "custom/home/home_top" .}}
     </div>
-
     <!--组织-->
     {{template "custom/home/home_org" .}}
 
@@ -13,14 +10,15 @@
 
     <!-- 数据集 -->
     {{template "custom/home/home_dataset" .}}
-
+    <!-- 中国算力网(C²NET) -->
+    <!-- {{template "custom/home/home_screen_map" .}} -->
     <!-- 体验官 -->
     {{template "custom/home/home_user_experience" .}}
 
     <!-- 社区活动 -->
     {{template "custom/home/home_activity" .}}
+    
    
-
     <!-- 中国算力网(C²NET) -->
     <div class="ui vertical masthead secondary c2net segment">
         <div class="ui container">
@@ -76,8 +74,7 @@
             </div><!--rotation3D end--> 
             <div class="_hm-computing-net-mobile-container" style="display:none;"></div>
         </div>
-    </div>    
-
+    </div>
     <!-- 协同开发环境 -->
     <a name="fourth"></a>
     <div class="ui container i-env _hm-container" style="padding-bottom:0rem;padding-top:4rem;">
@@ -134,8 +131,8 @@
     </div>
 
     <!-- 启智AI协作平台 介绍 -->
-    <!--    
-    <a name="fifth"></a>
+       
+    <!-- <a name="fifth"></a>
     <div class="ui container _hm-container">
         <div class="ui very padded inverted segment radius15">
             <div class="ui stackable grid">
@@ -162,8 +159,8 @@
                 </div>
             </div>
         </div>
-    </div>
-    -->
+    </div> -->
+   
 
     <!-- <div class="am-mt-30"></div> -->
     <script src="/self/js/jquery.min.js?v={{MD5 AppVer}}" type="text/javascript"></script>	

templates/repo/datasets/dataset_list.tmpl

@@ -1,6 +1,3 @@
-<style>
-
-</style>
 {{if .Attachments}}
   {{range .Attachments}}
   <div class="ui grid item" id="{{.UUID}}">

web_src/js/index.js

@@ -16,7 +16,7 @@ import Cookies from "js-cookie";
 import "jquery.are-you-sure";
 import "./vendor/semanticdropdown.js";
 import { svg } from "./utils.js";
-import echarts from "echarts";
+import * as echarts from 'echarts'
 import VueTreeList from 'vue-tree-list'
 import initContextPopups from "./features/contextpopup.js";
 import initGitGraph from "./features/gitgraph.js";

web_src/less/_home.less

@@ -63,3 +63,1937 @@ footer {
         }
     }
 }
+.__home_screemap{
+    .anchorBL{display: none;}
+    .BMap_cpyCtrl{display: none;}
+    position: relative;
+    .screemap_button_add{
+        position: absolute;
+        z-index: 999;
+        right: 6%;
+        top: 5%;
+        color: #007aff;
+        border: 1px solid #007aff;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+    .screemap_button_min{
+        position: absolute;
+        right: 3%;
+        z-index: 999;
+        top: 5%;
+        color: #007aff;
+        border: 1px solid #007aff;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+    .screemap_content_wrap{
+        position:absolute ;
+        top: 20%;
+        left: 14.5%;
+        z-index: 99;
+        min-height: 516px;
+        width: 406px;
+        background: linear-gradient(180.29deg, rgba(219,234,254,0.6) 0.4%,rgba(252,202,202,0) 99.4%);
+        font-size: 12px;
+        .screemap_content_part1{
+            display: flex;
+            align-items: center;
+            height: 56px;
+            border-bottom: 1px solid rgba(203, 212, 251, 1);
+            margin: 0 8px;
+            color: rgba(55, 0, 211, 1);
+            .text_wrap_right{
+                text-align: right;
+                width: 145px;
+                margin-top: 1rem;
+            }
+            .text_wrap_left{
+                text-align: left;
+                width: 145px;
+                margin-top: 1rem;
+            }
+        }
+        .screemap_content_part2{
+            width: 100%;
+            height: 460px;
+            .inner-container::-webkit-scrollbar {
+                display: none;
+            }
+            .inner-container {
+                position: absolute;
+                left: 0;
+                overflow-y: scroll;
+                margin: 0 -100px;
+                padding: 0 100px;
+                .container_wrap{
+                    margin: 20px 8px;
+                    width: 100%;
+                    height: 406px;
+                    .content_container{
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                        .left_task_num{
+                            float: right;
+                            height: 10px;
+                            line-height: 20px;
+                            border-radius: 5px;
+                            background: linear-gradient(89.88deg, rgba(235,60,90,1) 0.38%,rgba(254,153,90,1) 99.28%);
+                        }
+                        .right_card_duration{
+                            height: 10px;
+                            line-height: 20px;
+                            border-radius: 5px;
+                            background: linear-gradient(89.88deg, rgba(57,94,254,1) 0.38%,rgba(46,197,208,1) 99.28%);
+                        }
+                    }
+                }
+            }
+        }
+        
+    }
+}
+@media (min-width: 100px) and (max-width: 1199.99px) {
+    #homenews {
+      top: -1100px !important;
+    }
+  }
+  @media (min-width: 1320px) and (max-width: 1599.99px) {
+    ._hm-container {
+      width: 1200px !important;
+    }
+  }
+
+  @media only screen and (min-width: 1600px) {
+    ._hm-container {
+      width: 1440px !important;
+    }
+  }
+
+  @keyframes _hm-swing {
+    20% {
+      transform: rotate3d(0, 0, 1, 15deg);
+    }
+
+    40% {
+      transform: rotate3d(0, 0, 1, -10deg);
+    }
+
+    60% {
+      transform: rotate3d(0, 0, 1, 5deg);
+    }
+
+    80% {
+      transform: rotate3d(0, 0, 1, -5deg);
+    }
+
+    to {
+      transform: rotate3d(0, 0, 1, 0deg);
+    }
+  }
+
+  ._hm-swing {
+    transform-origin: top center;
+    animation-name: _hm-swing;
+  }
+
+  @keyframes _hm-shake {
+
+    from,
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translate3d(-10px, 0, 0);
+    }
+
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translate3d(10px, 0, 0);
+    }
+  }
+
+  ._hm-shake {
+    animation-name: _hm-shake;
+  }
+
+  @keyframes _hm-slide-up {
+
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    5% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    50% {
+      transform: translate3d(0, -90%, 0);
+    }
+
+    to {
+      transform: translate3d(0, -90%, 0);
+    }
+  }
+
+  ._hm-slide-up {
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-slide-up;
+  }
+
+  @keyframes _hm-fade-out {
+    from {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    70% {
+      opacity: 1;
+    }
+
+    80% {
+      opacity: 1;
+    }
+
+    90% {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  ._hm-fade-out {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-fade-out;
+    animation-delay: 1.2s;
+  }
+
+  @keyframes _hm-change-bg {
+    from {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    45% {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    50% {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    95% {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    to {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+  }
+
+  ._hm-change-bg {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-change-bg;
+  }
+
+  @keyframes _hm-show-section-1 {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    45% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    45.01%,
+    95% {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    95.01% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  ._hm-show-section-1 {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-show-section-1;
+  }
+
+  @keyframes _hm-show-section-2 {
+    from {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    45% {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    45.01%,
+    95% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    95.01% {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+  }
+
+  ._hm-show-section-2 {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-show-section-2;
+  }
+
+  @keyframes _hm-slide-in-left-once {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes _hm-slide-in-right-once {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes _hm-slide-in-left {
+    from {
+      opacity: 1;
+    }
+
+    5% {
+      transform: translateX(0);
+    }
+
+    45% {
+      opacity: 1;
+    }
+
+    45.01%,
+    95% {
+      opacity: 0;
+      transform: translateX(0);
+    }
+
+    95.01% {
+      opacity: 1;
+      transform: translateX(-100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  ._hm-slide-in-left {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-slide-in-left;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes _hm-slide-in-right {
+    from {
+      opacity: 0;
+    }
+
+    45% {
+      opacity: 0;
+
+    }
+
+    45.01% {
+      transform: translateX(100%);
+      opacity: 1;
+    }
+
+    50% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    95% {
+      opacity: 1;
+    }
+
+    95.01% {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  ._hm-slide-in-right {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-slide-in-right;
+    animation-fill-mode: forwards
+  }
+
+  @keyframes _hm-bounce-in-up {
+
+    0%,
+    60%,
+    75%,
+    90%,
+    100% {
+      transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
+    }
+
+    0% {
+      opacity: 0;
+      transform: translate3d(0, 3000px, 0);
+    }
+
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -25px, 0);
+    }
+
+    75% {
+      transform: translate3d(0, 10px, 0);
+    }
+
+    90% {
+      transform: translate3d(0, -5px, 0);
+    }
+
+    100% {
+      transform: none;
+    }
+  }
+
+  ._hm-bounce-in-up {
+    animation-name: _hm-bounce-in-up
+  }
+
+  @keyframes _hm-ani-bubble-c {
+    from {
+      opacity: 1;
+    }
+
+    20% {
+      opacity: 1;
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    40%,
+    50%,
+    90% {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  ._hm-ani-bubble-c {
+    animation-name: _hm-ani-bubble-c;
+    animation-duration: 20s;
+    animation-iteration-count: infinite;
+    animation-delay: 1s;
+  }
+
+  ._hm-transition-common {
+    transition: all 500ms linear 0s, z-index 0s linear 0s;
+  }
+
+  ._hm-bg-container {
+    overflow: hidden;
+    position: relative;
+    height: 580px;    
+  }
+
+  ._hm-pg-static {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  ._hm-pg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: none;
+  }
+
+  ._hm-pg-show {
+    display: block;
+  }
+
+  ._hm-pg-hide {
+    display: none;
+  }
+
+  ._hm-pg-bg-1 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-pg-bg-2 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");    
+  }
+  ._hm-pg-bg-3-placeholder-1 {
+    position: absolute;
+    width: 100%;
+    height: 51%;
+    top: 0;
+    left: 0;
+    background-color: #2e035f;
+    display: none;
+  }
+  ._hm-pg-bg-3-placeholder-2 {
+    position: absolute;
+    height: 50%;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    display: none;
+  }
+  ._hm-pg-bg-3 {
+    background: url("/img/home-banner-01.jpg");    
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+  }
+  ._hm-pg-bg-3-en {
+    background: url("/img/home-banner-01-en.jpg");    
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+  }
+
+  ._hm-slide-btn {
+    position: absolute;
+    z-index: 30;
+    color: white;
+    height: 30px;
+    width: 30px;
+    border: 1px solid rgba(255,255,255,0.6);
+    box-sizing: border-box;
+    top: 50%;
+    transform: translateY(-50%) rotate(-45deg) ;
+    cursor: pointer;
+    padding: 5px;
+  }
+
+  ._hm-slide-btn-left {
+    left: 30px;    
+    border-right: none;
+    border-bottom: none;    
+  }
+
+  ._hm-slide-btn-right {
+    right: 30px;
+    border-top: none;
+    border-left: none;  
+  }
+
+  ._hm-slide-pagination-c {
+    display: none;
+    position: absolute;
+    z-index: 30;
+    text-align: center;
+    height: 30px;
+    width: 100%;
+    bottom: 0;
+  }
+
+  ._hm-slide-pagination-item {
+    display: inline-block;
+    width: 8px;
+    height: 8px;    
+    background: rgb(185, 227, 244);
+    border-radius: 100%;
+    margin: 0 2px;
+    cursor: pointer;
+  }
+  ._hm-slide-pagination-item-active {
+    width: 40px;
+    border-radius: 4px;    
+    cursor: default;
+  }
+
+  ._hm-circle {
+    position: absolute;
+    top: 180px;
+    left: 70%;
+    z-index: 1;
+    opacity: 0.9;
+    transform-origin: 73px 73px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 146px;
+    height: 146px;
+    border-width: 0px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.6710000000000002%2C%20-0.8079999999999999%2C%200.8079999999999999%2C%20-0.6710000000000002%2C%201%2C%201)%22%3E%3Cstop%20stop-color%3D%22%2390fe9f%22%20stop-opacity%3D%220.6%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235b52f8%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-circle-rect {
+    position: absolute;
+    top: 400px;
+    left: 55%;
+    opacity: 0.9;
+    transform-origin: 632px 430px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 1264px;
+    height: 860px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.5890000000000002%2C%20-0.6789999999999998%2C%200.3177778954194038%2C%20-0.5954790000000001%2C%200.749%2C%200.847)%22%3E%3Cstop%20stop-color%3D%22%2390fe9f%22%20stop-opacity%3D%220%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2302cafd%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-bubble-c {
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    left: 0;
+    bottom: -90px;    
+    z-index: 3;
+    opacity: 0.8;
+  }
+
+  ._hm-bubble-1 {
+    position: absolute;
+    top: -474px;
+    left: 0px;
+    z-index: 9;
+    opacity: 0.9;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    transform: translate3d(0, 3000px, 0);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-bubble-2 {
+    position: absolute;
+    top: -455px;
+    left: 45px;
+    z-index: 10;
+    opacity: 0.9;
+    transform-origin: 10px 10px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    transform: translate3d(0, 3000px, 0);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-bubble-3 {
+    position: absolute;
+    top: -433px;
+    left: 6px;
+    z-index: 11;
+    opacity: 0.9;
+    transform-origin: 6px 6px;
+    animation-delay: 0.8s;
+    animation-duration: 2.4s;
+    animation-iteration-count: infinite;
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    transform: translate3d(0, 3000px, 0);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-universe {
+    position: relative;
+    top: -20px;
+    left: 20%;
+  }
+
+  ._hm-universe-1 {
+    position: absolute;
+    top: 116px;
+    left: 22px;
+    z-index: 5;
+    opacity: 0.9;
+    transform-origin: 34px 34px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 68px;
+    height: 68px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.14099999999999993%2C%20-0.622%2C%200.622%2C%200.14099999999999993%2C%200.422%2C%200.631)%22%3E%3Cstop%20stop-color%3D%22%235c29ec%22%20stop-opacity%3D%220%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%237702f8%22%20stop-opacity%3D%220.1%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%220.5%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-universe-2 {
+    position: absolute;
+    top: 122px;
+    left: 0;
+    z-index: 6;
+    opacity: 0.9;
+    transform: rotate(19deg);
+    transform-origin: 56px 29px;
+    width: 112px;
+    height: 58px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.5617810274234694%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%23046af7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%220.1%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%220.3%22%20offset%3D%220.98%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-area {
+    position: relative;
+    top: -25px;
+    right: 10%;
+    z-index: 3;
+  }
+
+  ._hm-person {
+    position: absolute;
+    top: 211px;
+    /* left: 1073px; 277px; */
+    right: 12px;;
+    width: 265px;
+    height: 309px;
+    z-index: 3;
+    opacity: 1;
+    transform-origin: 132.5px 154.5px;
+    background-image: url("/img/home-bg-ps.png");
+    background-size: cover;
+  }
+
+  ._hm-person-ring-1 {
+    position: absolute;
+    top: 248px;
+    right: -73px;
+    z-index: 8;
+    opacity: 0.9;
+    transform: rotate(282deg);
+    transform-origin: 194.5px 101px;
+    width: 389px;
+    height: 202px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.5648727994660357%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%2304d1f7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%221%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fff2%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-ring-2 {
+    position: absolute;
+    top: 246px;
+    right: -95px;
+    z-index: 6;
+    opacity: 0.9;
+    transform: rotate(281deg);
+    transform-origin: 194px 106.5px;
+    width: 388px;
+    height: 213px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.6313103100621746%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%2304d1f7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300c9ff%22%20stop-opacity%3D%220.5%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23bc00ff%22%20stop-opacity%3D%220.21%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-ring-3 {  
+    position: absolute;
+    top: 285px;
+    right: -20px;
+    opacity: 0.9;
+    transform: rotate(282deg);
+    transform-origin: 141.5px 66px;
+    width: 283px; 
+    height: 132px; 
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.048999999999999905%2C%20-1.2400000000000002%2C%200.9760346574435941%2C%200.17728199999999966%2C%200.467%2C%201.034)%22%3E%3Cstop%20stop-color%3D%22%231e04f7%22%20stop-opacity%3D%220.39%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300aeff%22%20stop-opacity%3D%220.52%22%20offset%3D%220.73%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%239ff7f2%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-1 {
+    position: absolute;
+    top: 35px;
+    right: 296px;
+    z-index: 5;
+    opacity: 0.9;
+    transform-origin: 73px 73px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 146px;
+    height: 146px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.5259999999999999%2C%20-0.45000000000000007%2C%200.45000000000000007%2C%20-0.5259999999999999%2C%200.648%2C%200.591)%22%3E%3Cstop%20stop-color%3D%22%239e02f9%22%20stop-opacity%3D%220.14%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230241f8%22%20stop-opacity%3D%220.23%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-2 {
+    position: absolute;
+    top: 86px;
+    right: 396px;
+    z-index: 6;
+    opacity: 0.9;
+    transform-origin: 16.5px 16.5px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 33px;
+    height: 33px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.42500000000000004%2C%20-0.4099999999999999%2C%200.4099999999999999%2C%20-0.42500000000000004%2C%200.648%2C%200.591)%22%3E%3Cstop%20stop-color%3D%22%2376029f%22%20stop-opacity%3D%220.01%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23010664%22%20stop-opacity%3D%220.22%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-3 {
+    position: absolute;
+    top: 121px;
+    right: 192px;
+    z-index: 15;
+    opacity: 0.9;
+    transform-origin: 20px 20px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.524%2C%200.4450000000000001%2C%20-0.4450000000000001%2C%200.524%2C%200.339%2C%200.364)%22%3E%3Cstop%20stop-color%3D%22%235f00b4%22%20stop-opacity%3D%220.06%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23150bc4%22%20stop-opacity%3D%220.31%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-4 {
+    position: absolute;
+    top: -39px;
+    right: -66px;
+    z-index: 2;
+    opacity: 0.9;
+    transform-origin: 121px 121px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 242px; 
+    height: 242px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.6710000000000002%2C%20-0.8079999999999999%2C%200.8079999999999999%2C%20-0.6710000000000002%2C%200.495%2C%200.568)%22%3E%3Cstop%20stop-color%3D%22%2390edfe%22%20stop-opacity%3D%220.6%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235b52f8%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-1 {}
+
+  ._hm-person-star-1-1 {
+    position: absolute;
+    top: 101px;
+    right: 477px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 3.5px;
+    width: 15px;
+    height: 7px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-1-2 {
+    position: absolute;
+    top: 97px;
+    right: 475px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 15.5px 3px;
+    width: 31px;
+    height: 6px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0023600416233090465%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-2 {}
+
+  ._hm-person-star-2-1 {
+    position: absolute;
+    top: 136px;
+    right: 388px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 3.5px;
+    width: 15px;
+    height: 7px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-2-2 {
+    position: absolute;
+    top: 132px;
+    right: 387px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 15px 3px;
+    width: 30px;
+    height: 6px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.002519999999999994%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-3 {}
+
+  ._hm-person-star-3-1 {
+    position: absolute;
+    top: 289px;
+    right: 594px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 6px 2.5px;
+    width: 12px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-3-2 {
+    position: absolute;
+    top: 285px;
+    right: 594px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 11.5px 2.5px;
+    width: 23px;
+    height: 5px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0029773156899810887%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fef512%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fea712%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-4 {}
+
+  ._hm-person-star-4-1 {
+    position: absolute;
+    top: 448px;
+    right: -15px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 3.5px;
+    width: 15px;
+    height: 7px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-4-2 {
+    position: absolute;
+    top: 444px;
+    right: -17px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 15.5px 3px;
+    width: 31px;
+    height: 6px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0023600416233090465%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-5 {}
+
+  ._hm-person-star-5-1 {
+    position: absolute;
+    top: 503px;
+    right: 101px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 5.5px 2.5px;
+    width: 11px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-5-2 {
+    position: absolute;
+    top: 500px;
+    right: 101px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 11px 2.5px;
+    width: 22px;
+    height: 5px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0032541322314049497%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fef512%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fea712%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-6 {
+    position: absolute;
+    top: 515px;
+    right: 328px;
+    z-index: 23;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2.5px;
+    width: 8px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-7 {
+    position: absolute;
+    top: 349px;
+    right: 221px;
+    z-index: 24;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 2.5px 2.5px;
+    width: 5px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-8 {
+    position: absolute;
+    top: 456px;
+    right: 138px;
+    z-index: 25;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2.5px;
+    width: 8px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-9 {
+    position: absolute;
+    top: 345px;
+    right: 48px;
+    z-index: 26;
+    opacity: 1;
+    transform: rotate(48deg);
+    transform-origin: 4px 1.5px;
+    width: 8px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-10 {
+    position: absolute;
+    top: 439px;
+    right: 347px;
+    z-index: 27;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4.5px 2.5px;
+    width: 9px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(255, 255, 255);
+  }
+
+  ._hm-person-star-11 {
+    position: absolute;
+    top: 291px;
+    right: 20px;
+    z-index: 28;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4.5px 2.5px;
+    width: 9px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(255, 255, 255);
+  }
+
+  ._hm-person-star-12 {
+    position: absolute;
+    top: 144px;
+    right: 333px;
+    z-index: 17;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 3px 2.5px;
+    width: 6px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(255, 255, 255);
+  }
+
+  ._hm-person-star-13 {
+    position: absolute;
+    top: 478px;
+    right: 220px;
+    z-index: 16;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 3px 2.5px;
+    width: 6px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-14 {
+    position: absolute;
+    top: 296px;
+    right: 377px;
+    z-index: 15;
+    opacity: 1;
+    transform: rotate(47deg);
+    transform-origin: 4px 1.5px;
+    width: 8px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-15 {
+    position: absolute;
+    top: 321px;
+    right: 427px;
+    z-index: 14;
+    opacity: 1;
+    transform: rotate(47deg);
+    transform-origin: 9.5px 1.5px;
+    width: 19px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-16 {
+    position: absolute;
+    top: 451px;
+    right: 470px;
+    z-index: 13;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 3px 2.5px;
+    width: 6px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+
+  }
+
+  ._hm-person-star-17 {
+    position: absolute;
+    top: 230px;
+    right: 128px;
+    z-index: 12;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2px;
+    width: 8px;
+    height: 4px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-18 {
+    position: absolute;
+    top: 564px;
+    right: 278px;
+    z-index: 11;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2.5px;
+    width: 8px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-19 {
+    position: absolute;
+    top: 504px;
+    right: 404px;
+    z-index: 10;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 1.5px;
+    width: 8px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-20 {
+    position: absolute;
+    top: 291px;
+    right: 68px;
+    z-index: 9;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 6px 2.5px;
+    width: 12px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-21 {
+    position: absolute;
+    top: 238px;
+    right: 48px;
+    z-index: 8;
+    opacity: 1;
+    transform: rotate(52deg);
+    transform-origin: 6px 2.5px;
+    width: 12px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-22 {
+    position: absolute;
+    top: 106px;
+    right: 161px;
+    z-index: 7;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 10px 2.5px;
+    width: 20px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-23 {
+    position: absolute;
+    top: 387px;
+    right: 436px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 2.5px 2px;
+    width: 5px;
+    height: 4px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-24 {
+    position: absolute;
+    top: 506px;
+    right: 65px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 4px 2px;
+    width: 8px;
+    height: 4px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-25 {
+    position: absolute;
+    top: 269px;
+    right: 306px;
+    z-index: 4;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 4px;
+    width: 15px;
+    height: 8px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-26 {
+    position: absolute;
+    top: 344px;
+    right: 262px;
+    z-index: 3;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 6px 3px;
+    width: 12px;
+    height: 6px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-27 {
+    position: absolute;
+    top: 417px;
+    right: 251px;
+    z-index: 2;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 11.5px 3px;
+    width: 23px;
+    height: 6px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-28 {
+    position: absolute;
+    top: 171px;
+    right: 13px;
+    z-index: 1;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 4px;
+    width: 15px;
+    height: 8px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-txt-content-c {
+    position: relative;
+    top: 70px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 80%;
+    min-width: 300px;
+    max-width: 900px;
+    z-index: 10;
+  }
+
+  ._hm-big-txt-1,
+  ._hm-big-txt-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ._hm-big-title {
+    text-align: center;
+    font-weight: 400;
+    font-size: 48px;
+    color: rgba(251, 251, 251, 1);
+    font-style: normal;
+    letter-spacing: 0px;
+    line-height: 53px;
+    text-decoration: none;
+    text-align: center;
+    margin-bottom: 38px;
+  }
+
+  ._hm-big-descr {
+    font-weight: 300;
+    font-size: 28px;
+    color: rgb(255, 255, 255);
+    font-style: normal;
+    letter-spacing: 0px;
+    line-height: 36px;
+    text-decoration: none;
+    text-align: center;
+    margin-bottom: 32px;
+  }
+
+  ._hm-big-btn-c {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 42px;
+    width: 200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  ._hm-big-btn-c a {
+    text-decoration: none;
+    color: rgb(255, 255, 255);
+  }
+
+  ._hm-big-btn-1 {
+    width: 160px;
+    height: 48px;
+    border-style: none;
+    border-color: unset;
+    color: rgb(255, 255, 255);
+    border-radius: 40px;
+    font-size: 18px;
+    padding: 0px;
+    text-align: center;
+    font-weight: normal;
+    font-style: normal;
+    margin-right: 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;   
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22null%22%3E%3Cstop%20stop-color%3D%22%23db00ff%22%20stop-opacity%3D%221%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230075ff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-big-btn-2,
+  ._hm-big-btn-3 {
+    cursor: pointer;
+    width: 160px;
+    height: 40px;
+    border-color: rgb(251, 251, 251);
+    border-width: 1px;
+    border-style: solid;
+    color: rgb(255, 255, 255);
+    border-radius: 2px;
+    font-size: 14px;
+    padding: 0px;
+    text-align: center;
+    margin-right: 28px;
+    box-sizing: border-box;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ._hm-recommend-info {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: 60px 0px;
+    flex-wrap: wrap;
+  }
+
+  ._hm-recommend-info-area {
+    height: 100%;
+    flex: 1;
+    margin: 20px;
+    display: flex;
+    position: relative;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    min-width: 240px;
+    height: 150px;
+  }
+
+  ._hm-recommend-info-area ._hm-link {
+    font-weight: 400;
+    font-size: 20px;
+    color: rgba(255, 255, 255, 1);
+    text-decoration: none;
+  }
+
+  ._hm-recommend-info-area ._hm-link:hover {
+    opacity: 0.8;
+  }
+
+  ._hm-recommend-info-area-1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-start;
+    font-size: 14px;
+    color: rgba(16, 16, 16, 1);
+  }
+
+  ._hm-recommend-info-area-1 div {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  ._hm-recommend-info-area-1 div i {
+    vertical-align: -2px;
+  }
+
+  ._hm-recommend-info-area-1 a {
+    font-size: 14px;
+    color: rgb(16, 16, 16);
+    text-decoration: none;
+    font-weight: 400;
+  }
+
+  ._hm-recommend-info-area-1 a:hover {
+    opacity: 0.8;
+  }
+
+  ._hm-recommend-info-area-2 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.31499999999999984%2C%20-1.339%2C%200.23547450572320502%2C%200.31499999999999984%2C%200.5%2C%201.207)%22%3E%3Cstop%20stop-color%3D%22%231eb3c4%22%20stop-opacity%3D%220.91%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230ca451%22%20stop-opacity%3D%220.5%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-2-bg-1 {
+    position: absolute;
+    width: 42px;
+    height: 42px;
+    border-radius: 100%;
+    right: 10px;
+    top: 23px;
+    z-index: -1;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.3550000000000002%2C%200.765%2C%20-0.8018622448979591%2C%20-0.3550000000000002%2C%200.779%2C%200.021)%22%3E%3Cstop%20stop-color%3D%22%23c2ffd8%22%20stop-opacity%3D%220.1%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300a5b8%22%20stop-opacity%3D%220.6%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300a5b8%22%20stop-opacity%3D%220.2%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-2-bg-2 {
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    border-radius: 100%;
+    left: 42%;
+    bottom: 2px;
+    z-index: -1;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.3550000000000002%2C%200.765%2C%20-0.7321006616257089%2C%20-0.3550000000000002%2C%200.779%2C%200.021)%22%3E%3Cstop%20stop-color%3D%22%23c2ffd8%22%20stop-opacity%3D%220.1%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300b87e%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-3 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22null%22%3E%3Cstop%20stop-color%3D%22%23c7b4ec%22%20stop-opacity%3D%220.8%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23f78284%22%20stop-opacity%3D%220.9%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-4 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.08399999999999999%2C%201.412%2C%20-0.24831217481789805%2C%200.08399999999999999%2C%200.306%2C%20-0.053)%22%3E%3Cstop%20stop-color%3D%22%23f89277%22%20stop-opacity%3D%220.8%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235d32ff%22%20stop-opacity%3D%220.9%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+  #homenews {
+    position: absolute;
+    left: 0;     
+    width: 420px;
+    top: -328px;
+    z-index: 2;
+  }
+  .homenews {
+    background-color: transparent;
+  }
+  .homenews::before {
+    background-color: transparent;
+  }
+  .homenews .swiper-slide {
+  }
+  .homenews .swiper-slide .content-c {    
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
+    height: 90%;
+    border-radius: 16px; 
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+  .homenews .swiper-slide .content {
+    color: white;
+  }
+
+  @media only screen and (max-width: 767px) {
+    ._hm-pg-bg-1 {      
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233b83fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");    
+      background-size: 1500px 700px;
+      background-position: center center;
+    }
+    ._hm-person-area {
+      display: none;
+    }
+    ._hm-bubble-c {
+      display: none;
+    }
+    #homenews {
+      display: none;
+    }
+    ._hm-universe {    
+      top: -70px;
+      left: 10%;
+    }
+    ._hm-big-descr {
+      font-size: 20px;
+    }
+    ._hm-big-btn-1 {
+      height: 56px;
+    }
+    ._hm-big-btn-2 {
+      width: 125px;
+      margin-right: 10px;
+    }
+    ._hm-circle-rect {
+      left: 0;
+    }
+    ._hm-pg-bg-3-placeholder-1 {
+      display: block;      
+    }
+    ._hm-pg-bg-3-placeholder-2 {
+      display: block;      
+      background: url(/img/home-banner-01.jpg);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    ._hm-pg-bg-3-placeholder-2-en {
+      background: url(/img/home-banner-01-en.jpg);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    ._hm-pg-bg-3 {
+      background: none;
+    }
+    ._hm-bg-descr-vedio-link {
+      display: block;      
+      margin-left: 0px !important;
+      margin-top: 10px;
+    }
+    ._hm-slide-btn {
+      display: none;
+    }   
+    ._hm-big-title-en {
+      font-size: 32px;
+      margin-bottom: 20px;      
+      margin-top: -32px;
+    }
+    ._hm-big-title-mobile-margin-top {
+      margin-top: -40px;
+      margin-bottom: 26px;
+    }
+    ._hm-big-title-mobile-margin-top-en {
+      margin-top: -50px;
+      margin-bottom: 8px;
+    }
+    ._hm-computing-net-container {
+      display: none !important;
+    }
+    ._hm-computing-net-mobile-container {	    
+      display: block !important;	
+      background-image: url("/rotation3D/img/baseimg.png");	
+      background-position: center center;     	
+      background-repeat: no-repeat;	
+      background-size: cover;	
+      padding: 45% 0;	
+    }
+    
+  } 
+  .homepro-bg {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.013999999999999973%2C%201.0040000000000002%2C%20-0.1807553452932099%2C%200.013999999999999973%2C%200.374%2C%20-0.007)%22%3E%3Cstop%20stop-color%3D%22%23eee9da%22%20stop-opacity%3D%220.2%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23f3e7f7%22%20stop-opacity%3D%220.26%22%20offset%3D%220.29%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23d0e7ff%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+ }
+ .homedataset {
+    padding-top: 4em;
+    padding-bottom: 4em;
+  }    
+  .home-dataset-list {    
+    position: relative;
+    z-index: 9;
+    padding: 0em 1em 3em;
+    overflow: hidden;
+  }
+  .home-dataset-list .swiper-slide {
+    padding-top: 5px;
+  }
+  .home-dataset-list .dataset-card {
+    height: 130px;
+    width: 130px;
+    border: 1px solid rgba(157, 197, 226, 0.4);    
+    box-shadow: rgb(157 197 226 / 20%) 0px 5px 10px 0px;
+    color: rgb(16, 16, 16);
+    border-radius: 6px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;    
+    transition: all 0.1s;
+  }
+  .home-dataset-list .dataset-card:hover {
+    transform: translateY(-3px);
+  }
+  .home-dataset-list .dataset-card>div {
+    width:100%;
+    display: flex;   
+    justify-content: center;
+  }
+  .home-dataset-list .dataset-card .content {
+    width:100%;   
+    overflow: hidden;    
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    padding: 0 10px;
+  }
+  .home-dataset-list .dataset-card .icon-c {   
+    font-size: 14px;
+    color: #101010;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  .home-dataset-list .dataset-card .label {
+    font-size: 14px;
+    color: #101010;
+    margin-bottom: 8px;
+  }
+  .home-dataset-list .dataset-card .svg.fill:not([stroke]) {
+    fill: url(#ila93em9ydx6bi61,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs);
+  }
+  .home-dataset-list .dataset-card .svg.fill:not([fill]) {
+    fill: url(#ila93em9ydx6bi61,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs);
+  }
+  .home-dataset-list .dataset-card .count {
+    font-size:12px;
+    color:rgb(136,136,136);
+  }
+  .home-dataset-list .swiper-pagination-bullet-active {
+    width: 40px;
+    border-radius: 4px;
+  }
+  .homeuserexp-bg {  
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.04900000000000009%2C%201.104%2C%20-0.06118479166666667%2C%200.04900000000000009%2C%200.339%2C%20-0.107)%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.33%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23e5e7eb%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+  .homeuserexp {
+    padding-top: 5em;
+    padding-bottom: 2em;
+  }
+
+  .homeuserexp .swiper-prev {
+    position: absolute;
+    top: 104px;
+    left: 14px;
+    z-index: 10;
+  }
+
+  .homeuserexp .swiper-next {
+    position: absolute;
+    top: 104px;
+    right: 14px;
+    z-index: 10;
+  }
+  
+  .homeuserexp .prev-next-i {    
+    font-size: 22px;
+    border: 1px solid rgb(0, 122, 255);
+    border-radius: 100%;
+    color: rgb(0, 122, 255);
+    cursor: pointer;
+  }
+  
+  .homeuserexp .swiper-prev.swiper-button-disabled .prev-next-i, .homeuserexp .swiper-next.swiper-button-disabled .prev-next-i {
+    opacity: 0.35;
+    cursor: default;
+  }
+
+  .home-user-exp-list {    
+    position: relative;
+    z-index: 9;
+    padding: 0em 1.2em 3em 1.2em;
+    overflow: hidden;
+  }
+
+  .home-user-exp-list .user-card {
+    width: 240px;
+    height: 180px;    
+    color: rgb(16, 16, 16);
+    border-radius: 6px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  
+  .home-user-exp-list .swiper-slide {
+    display: flex;
+    justify-content: center;
+  }
+
+  .home-user-exp-list .user-card>div {
+    width:100%;
+    display: flex;   
+    justify-content: center;
+  }
+
+  .home-user-exp-list .user-card .content {
+    width:100%;   
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    padding: 0 10px;
+  }
+
+  .home-user-exp-list .user-card .img-c {   
+    font-size: 14px;
+    color: #101010;
+    display:flex;
+    justify-content: center;
+    align-items: center;   
+    height: 74px;
+    margin-bottom: 8px;
+  }
+
+  .home-user-exp-list .user-card .img {
+    border: 3px solid rgb(243, 240, 164);
+    border-radius: 100%;    
+    box-shadow: rgb(255 220 144) 0px 0px 0px 2px;
+    height: 60px;
+    width: 60px;
+    display: block;
+    background-size:cover;
+  }
+
+  .home-user-exp-list .user-card .label {
+    font-size: 14px;
+    color: #101010;
+    margin-bottom: 8px;
+    font-weight: 550;
+  }
+
+  .home-user-exp-list .user-card .descr {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    font-size:12px;
+    color:rgb(136,136,136);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-height: 50px;
+    height: 40px;
+    white-space: break-spaces;
+  }
+  .homeactivity {
+    padding-top: 5rem;
+    padding-bottom: 6rem;
+    overflow: hidden;
+  }
+  .homeactivity .card {
+    width: 360px !important;
+    height: 160px !important;
+  }
+  .homeactivity img {
+    width: 100% !important;
+    height: 100% !important;
+  }
+  .homeactivity .image-name {
+    font-size: 14px;
+    color: rgb(16, 16, 16);
+    text-align: center;
+    margin-top: 0.8em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 20px;
+    box-sizing: border-box;
+    white-space: nowrap;
+  }
+  @media only screen and (max-width: 767px) {
+    .mobile-text-align-center {
+      text-align: center !important;
+    }
+    .mobile-justify-content-center {
+      justify-content: center !important;
+    }
+  }
+  [tooltip]{
+    position: relative;
+    // display:inline-block;
+    // border: 1px solid rgba(203, 212, 251, 1);
+    padding: 4px 6px;
+}
+[tooltip]::before {
+    content: "";
+    position: absolute;
+    border-width: 4px 6px 0 6px;
+    border-style: solid;
+    border-color: transparent;
+    border-top-color: rgba(203, 212, 251, 1);
+    z-index: 99;
+    opacity:0;
+
+    top:-5px;
+    left:50%;
+    transform: translateX(-50%);
+}
+[tooltip]::after {
+    content: attr(tooltip);
+    position: absolute;
+    background: #fff;
+    text-align: center;
+    color: #101010;        
+    border-radius: 5px;
+    padding:4px 2px;
+    min-width: 80px;
+    pointer-events: none;
+    z-index:99;
+    opacity:0;
+    border: 1px solid rgba(203, 212, 251, 1);
+    left:50%;
+    top:-5px;
+    transform: translateX(-50%)   translateY(-100%);
+}
+
+[tooltip]:hover::after,[tooltip]:hover::before{
+    opacity: 1;
+}
+/* 右侧 */
+[tooltip][position='right']::before{
+    top: 50%;
+    left:100%;
+    margin-left: -3px;
+    transform: translateY(-50%) rotate(90deg);
+}
+[tooltip][position='right']::after{
+    top: 50%;
+    left: 100%;
+    margin-left: 5px;
+    transform: translateY(-50%);
+}
+/* 左侧 */
+[tooltip][position='left']::before{
+    top: 50%;
+    left:0;
+    margin-left: -9px;
+    transform: translateY(-50%) rotate(-90deg);
+}
+[tooltip][position='left']::after{
+    top: 50%;
+    left: 0;
+    margin-left: -5px;
+    transform: translateY(-50%) translateX(-100%);
+}
+/* 底侧 */
+[tooltip][position='bottom']::before{
+    top: 100%;
+    left:50%;
+    margin-top: 1px;
+    transform: translatex(-50%) rotate(180deg);
+}
+[tooltip][position='bottom']::after{
+    top: 100%;
+    left: 50%;
+    margin-top: 5px;
+    transform: translatex(-50%) ;
+}
+.contacts-qr-code-c {
+    margin:2.0rem 0;
+    display:flex !important;
+    justify-content:flex-end;
+}

web_src/vuepages/apis/modules/homemap.js

@@ -0,0 +1,17 @@
+import service from "../service";
+
+// 获取中心详细情况
+// 
+export const getAiCenterOverview = () => {
+  return service({
+    url: `/api/v1/cloudbrainboard/ai_center_overview`,
+    method: "get",
+  });
+};
+
+export const getAiLocation = () => {
+    return service({
+      url: `/api/v1/cloudbrainboard/location`,
+      method: "get",
+    });
+  };

web_src/vuepages/langs/config/en-US.js

@@ -92,7 +92,8 @@ const en = {
 
   emptyPage: 'Request forbidden by administrative rules',
   emptyPageDescr: 'The page you are trying to reach either <strong>does not exist</strong> or <strong>you are not authorized</strong> to view it.',
-
+  handleTask: 'Processing tasks',
+  freeCompute:'Inclusive computing power',
   resourcesManagement: {
     OpenI: 'OpenI',
     C2Net: 'C2Net',

web_src/vuepages/langs/config/zh-CN.js

@@ -91,7 +91,8 @@ const zh = {
 
   emptyPage: '您的访问受限！',
   emptyPageDescr: '您正尝试访问的页面 <strong>不存在</strong> 或 <strong>您尚未被授权</strong> 查看该页面。',
-
+  handleTask: '处理任务',
+  freeCompute:'普惠算力',
   resourcesManagement: {
     OpenI: "启智集群",
     C2Net: "智算集群",

web_src/vuepages/pages/home/screenmap/index.vue

@@ -0,0 +1,395 @@
+<template>
+    <div class="__home_screemap">
+        <button v-if="showFlag" @click="roamMap(0)" class="screemap_button_add">+</button>
+        <button v-if="showFlag" @click="roamMap(1)" class="screemap_button_min">-</button>
+        <div class="screemap_content_wrap" v-if="showData">
+          <div class="screemap_content_part1">
+            <div class="text_wrap_right">
+              <span>{{ $t('handleTask') }}</span>
+            </div>
+            <div style="width: 100px;"></div>
+            <div class="text_wrap_left">
+              <span>{{ $t('freeCompute') }}</span>
+            </div>
+          </div>
+          <div class="screemap_content_part2">
+            <div class="inner-container">
+              <div class="container_wrap">
+                <div class="content_container" v-for="item in cardAndJobCountList">
+                  <div style="width: 145px;">
+                    <div :style="{width:item.percentTask + '%',padding:(item.num==0?'0px':'')}" class="left_task_num" :tooltip="item.num +'个'" position="left"></div>
+                  </div>
+                  <div style="width: 100px;text-align: center;white-space: nowrap;overflow: hidden;" :title="item.ai_center">{{item.ai_center.slice(0,6)}}</div>
+                  <div style="width: 145px;">
+                    <div :style="{width:item.percentDuration + '%',padding:(item.card_duration==0.00?'0px':'')}" class="right_card_duration" :tooltip="item.card_duration + '卡时'" position="right"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="main" style="width:100%;height:759px"></div>
+    </div>
+</template>
+<script>
+import { getAiCenterOverview,getAiLocation } from "~/apis/modules/homemap";
+import * as echarts from 'echarts'
+import 'echarts/extension/bmap/bmap';
+
+let {AppSubUrl} = window.config
+export default {
+data() {
+    return {
+      
+      options:{},
+      myChart:'',
+      CCRFTETW:[],
+      C2NET:[],
+      SuperCompute:[],  
+      TaskLine:[],
+      cardAndJobCountList:[],
+      showFlag:false,
+      showData:false
+
+    }
+},
+methods: {
+    getOption(){
+      this.options = {
+        tooltip: {
+          trigger: 'item',
+          // formatter: '{b}',
+        },
+      color: [
+        '#5470c6',
+        '#0191FF',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc'
+      ],
+      bmap: {
+        center: [98.114129, 31.550339],
+        zoom: 6,
+        roam: 'move',
+        mapStyle: {
+          styleJson: [
+            {
+              featureType: 'background',
+              elementType: 'all',
+              stylers: {
+                color: '#FFFFFF'
+              }
+            },
+            {
+              featureType: 'water',
+              elementType: 'all',
+              stylers: {
+                color: '#DBEAFE'
+              }
+            },
+            {
+              featureType: 'road',
+              elementType: 'all',
+              stylers: {
+                visibility: 'off'
+              }
+            },
+            {
+              featureType: 'poi',
+              elementType: 'all',
+              stylers: {
+                visibility: 'off'
+              }
+            },
+            {
+              featureType: 'local',
+              elementType: 'all',
+              stylers: {
+                color: 'off'
+              }
+            },
+            {
+              featureType: 'arterial',
+              elementType: 'labels',
+              stylers: {
+                visibility: 'off'
+              }
+            },
+            {
+              featureType: 'boundary',
+              elementType: 'geometry',
+              stylers: {
+                color: '#9bacf0'
+              }
+            },
+            {
+              featureType: 'boundary',
+              elementType: 'geometry.fill',
+              stylers: {
+                color: '#C7D1FB'
+              }
+            },
+            {
+              featureType: 'building',
+              elementType: 'all',
+              stylers: {
+                visibility: 'off'
+              }
+            },
+            {
+              featureType: 'label',
+              elementType: 'all',
+              stylers: {
+                visibility: 'off'
+              }
+            }
+          ]
+        }
+      },
+      series: [
+        {
+          name: '超算中心',
+          type: 'scatter',
+          coordinateSystem: 'bmap',
+          data: this.SuperCompute,
+          symbolSize: function (val) {
+            return val[2] / 7;
+          },
+          encode: {
+            value: 2
+          },
+          label: {
+            formatter: '{b}',
+            position: 'right',
+            show: false
+          },
+          emphasis: {
+            label: {
+              show: true
+            }
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(25, 100, 150, 0.5)',
+            shadowOffsetY: 5,
+            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+              {
+                offset: 0,
+                color: 'rgb(67, 235, 255)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(0, 123, 255)'
+              }
+            ])
+          },
+          zlevel: 1
+        },
+        {
+          name: '东数西算',
+          type: 'scatter',
+          coordinateSystem: 'bmap',
+          data: this.CCRFTETW,
+          symbolSize: function (val) {
+            return val[2] / 7;
+          },
+          encode: {
+            value: 2
+          },
+          label: {
+            formatter: '{b}',
+            position: 'right',
+            show: false
+          },
+          emphasis: {
+            label: {
+              show: true
+            }
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(25, 100, 150, 0.5)',
+            shadowOffsetY: 5,
+            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+              {
+                offset: 0,
+                color: 'rgb(217, 1, 217)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(99, 1, 237)'
+              }
+            ])
+          },
+          zlevel: 3
+        },
+        {
+          name: '智算中心',
+          type: 'scatter',
+          coordinateSystem: 'bmap',
+          data: this.C2NET,
+          symbolSize: function (val) {
+            return val[2] / 7;
+          },
+          encode: {
+            value: 2
+          },
+          label: {
+            formatter: function(datas){
+              if(datas.dataIndex<10){
+                return datas.name
+              }else{
+                return ''
+              }
+            },
+            position: 'right',
+            show: true
+          },
+          showEffectOn: 'render',
+          rippleEffect: {
+            brushType: 'stroke'
+          },
+
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(120, 36, 50, 0.5)',
+            shadowOffsetY: 5,
+            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+              {
+                offset: 0,
+                color: 'rgb(251, 118, 123)'
+              },
+              {
+                offset: 1,
+                color: 'rgb(204, 46, 72)'
+              }
+            ])
+          },
+          emphasis: {
+            scale: true
+          },
+          zlevel: 4
+        },
+        {
+          name: '实时调度任务',
+          type: 'lines',
+          coordinateSystem: 'bmap',
+          zlevel: 2,
+          effect: {
+            show: true,
+            symbol:'rect',
+            period: 1.5, // 速度
+            trailLength: 0.5, // 特效拖尾
+            color: '#007BFF',
+            symbolSize: 3
+          },
+          lineStyle: {
+            color: 'rgba(255,255,255,0.1)',
+            width: 0,
+            curveness: 0.2
+          },
+          data: this.TaskLine
+        }
+      ]
+    }   
+    this.options && this.myChart.setOption(this.options)
+  },
+  roamMap(flag){
+    let currentZoom = this.myChart.getOption().bmap[0].zoom; // 当前的缩放比例   
+    if (flag == 1) {
+      currentZoom = currentZoom - 1
+    }else{
+      currentZoom = currentZoom + 1
+    }
+    if(currentZoom===4 && flag===0){
+      this.myChart.setOption({
+        bmap: {
+            zoom: 5
+        }
+      })
+    }else{
+      this.myChart.setOption({
+        bmap: {
+            zoom: currentZoom
+        }
+      })
+    }
+    
+  },
+  async getAiCenterInfo(){
+    const allPromise = Promise.allSettled([getAiCenterOverview(),getAiLocation()])
+    try{
+      const reslut = await allPromise;
+      this.showFlag=true
+      const [AiCenterInfo,localtionInfo] = reslut
+      if(AiCenterInfo.status ==='fulfilled'){
+        const GeomapData = AiCenterInfo.value.data.locationInfo
+        this.CCRFTETW = GeomapData['东数西算'].map((item)=>{
+          return {name:item.name,value:[Number(item.longitude),Number(item.latitude),item.value]}
+        })
+        this.C2NET = GeomapData['智算中心'].map((item)=>{
+          return {name:item.name,value:[Number(item.longitude),Number(item.latitude),item.value]}
+        })
+        this.SuperCompute = GeomapData['超算中心'].map((item)=>{
+          return {name:item.name,value:[Number(item.longitude),Number(item.latitude),item.value]}
+        })
+        const cardAndJobCount = AiCenterInfo.value.data.cardAndJobCount
+        if(cardAndJobCount.length!==0){
+          this.showData = true
+          const cardAndJobCountSort = cardAndJobCount.map(({num})=>{return Number(num)})
+          let sumDuration = Number(cardAndJobCount[0].card_duration)
+          let sumTask = Math.max(...cardAndJobCountSort)
+          this.cardAndJobCountList = cardAndJobCount.map((item)=>{
+            const obj = {percentDuration:(Number(item.card_duration)/sumDuration).toFixed(2)*100,percentTask:(Number(item.num)/sumTask).toFixed(2)*100}
+            item.card_duration = (Number(item.card_duration) / 3600).toFixed(2)
+            return {...item,...obj}
+          })
+        }
+        
+      }else{
+
+      }
+      if(localtionInfo.status ==='fulfilled'){
+        const schedulingTasks = localtionInfo.value.data
+        if(schedulingTasks.length===0){
+          this.TaskLine = []
+        }else{
+          this.TaskLine = schedulingTasks.map((item)=>{
+            return {coords:[[Number(item.from_longitude),Number(item.from_latitude)],[Number(item.to_longitude),Number(item.to_latitude)]]}
+          })
+        }
+      }else{
+
+      }
+      this.getOption()
+    }catch(error){
+      console.log(error)
+    }
+  },
+  resizeEcharts(){
+    this.myChart.resize();
+  }
+},
+computed: {
+
+
+},
+beforeDestroy() {
+  window.removeEventListener("resize", this.resizeEcharts);
+},
+mounted() {
+  const chartDom = document.getElementById('main');
+  this.myChart = echarts.init(chartDom);
+  this.getAiCenterInfo()
+  window.addEventListener('resize', this.resizeEcharts)
+},
+};
+</script>
+<style scoped lang="less">
+
+</style>
+  

web_src/vuepages/pages/home/screenmap/vp-screen-map.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import App from './index.vue';
+import { i18n} from '~/langs'
+new Vue({
+  i18n,
+  render: (h) => h(App),
+}).$mount('#__vue-root');

web_src/vuepages/pages/ros-hmci/App.vue

@@ -7,5 +7,3 @@ export default {
   name: "App",
 };
 </script>
-
-<style></style>

yarn.lock

@@ -3706,12 +3706,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-echarts@3.8.5:
-  version "3.8.5"
-  resolved "https://registry.npmmirror.com/echarts/download/echarts-3.8.5.tgz"
-  integrity sha1-WOSlHSdDxvt1JXsNwKnPn1N4rA4=
+echarts@5.4.2:
+  version "5.4.2"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz"
+  integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==
   dependencies:
-    zrender "3.7.4"
+    tslib "2.3.0"
+    zrender "5.4.3"
+
 
 editions@^1.3.3:
   version "1.3.4"
@@ -11696,6 +11698,12 @@ tslib@^1.10.0, tslib@^1.9.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
@@ -12794,7 +12802,10 @@ zenscroll@^4.0.2:
   resolved "https://registry.npmjs.org/zenscroll/-/zenscroll-4.0.2.tgz"
   integrity sha1-6NV3TRwHOKR7z6hynzcS4t7d6yU=
 
-zrender@3.7.4:
-  version "3.7.4"
-  resolved "https://registry.nlark.com/zrender/download/zrender-3.7.4.tgz"
-  integrity sha1-+EfVOUhIHvbUKQbR6prux6y+/fI=
+zrender@5.4.3:
+  version "5.4.3"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz"
+  integrity sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==
+  dependencies:
+    tslib "2.3.0"
+