调整

microserviceUserH5/static/css/browser.css

@@ -0,0 +1,120 @@
+@media screen and (max-width: 750px) {
+  html {
+    font-size: calc(100vw / 7.5);
+  }
+}
+
+@media screen and (min-width: 750px) {
+  html {
+    font-size: calc(450px / 7.5);
+  }
+}
+
+html, body, div, ul, li, p {
+  padding: 0;
+  margin: 0;
+}
+
+ul, li {
+  list-style: none;
+}
+
+input{  
+  background:none;  
+  outline:none;  
+  border:0px;
+}
+.logo-row{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-top: 3rem;
+}
+.logo{
+  width: 2.4rem;
+  height: 0.72rem;
+}
+.search-wrap{
+  display: flex;
+  align-items: center;
+  margin: auto;
+  margin-top: 0.4rem;
+  width: 6.9rem;
+  height: 0.9rem;
+  background: #FFFFFF;
+  border-radius: 0.2rem;
+  border: 0.03rem solid #696969;
+}
+.search-icon{
+  width: 0.52rem;
+  height: 0.52rem;
+  margin-left: 0.24rem;
+}
+.ipt{
+  margin-left: 0.1rem;
+  font-size: 0.3rem;
+  font-weight: 500;
+  color: #333333;
+}
+.tag-wrap{
+  padding-top: 0.24rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.tag-item{
+  width: 1.6rem;
+  height: 1.96rem;
+  background: #FFF9F1;
+  border-radius: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding-left: 0.1rem;
+  margin-top: 0.3rem;
+}
+.icon-row{
+  width: 0.68rem;
+  height: 0.64rem;
+  display: inline-block;
+}
+.icon-title{
+  font-size: 0.28rem;
+  font-weight: 500;
+  color: #333333;
+}
+.right-arrow{
+  width: 0.32rem;
+  height: 0.32rem;
+  display: inline-block;
+}
+
+#toast-container>.toast-error {
+  background-image: none !important;
+}
+
+.toast-error {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+#toast-container>div {
+  font-size: 14px;
+  min-width: 80px !important;
+  padding: 12px !important;
+  box-shadow: none;
+}
+
+.toast-center-center {
+  min-width: 100px;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+@media (max-width: 480px) and (min-width: 241px) {
+  #toast-container>div {
+    min-width: 80px !important;
+    width: auto;
+  }
+}

microserviceUserH5/static/css/browserDetail.css

@@ -0,0 +1,211 @@
+@media screen and (max-width: 750px) {
+  html {
+    font-size: calc(100vw / 7.5);
+  }
+}
+
+@media screen and (min-width: 750px) {
+  html {
+    font-size: calc(450px / 7.5);
+  }
+}
+
+html, body, div, ul, li, p {
+  padding: 0;
+  margin: 0;
+}
+
+ul, li {
+  list-style: none;
+}
+
+input{  
+  background:none;  
+  outline:none;  
+  border:0px;
+}
+.container{
+  min-height: 99vh;
+  padding-top: 0.01rem;
+  background: #F5F7FA;
+}
+.header-wrap{
+  padding-top: 0.18rem;
+  background: #FFFFFF;
+  overflow: hidden;
+}
+.search-wrap{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  margin-bottom: 0.18rem;
+  width: 7.14rem;
+  height: 0.66rem;
+  background: #CCCDD4;
+  border-radius: 0.2rem;
+  opacity: 0.4;
+}
+.search-icon{
+  width: 0.28rem;
+  height: 0.28rem;
+  margin-left: 0.24rem;
+}
+.ipt{
+  width: 2rem;
+  margin-left: 0.1rem;
+  font-size: 0.32rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+}
+.title-wrap{
+  display: flex;
+  align-items: center;
+  height: 0.88rem;
+  border-top: 0.01rem solid rgba(238,238,238,1);
+}
+.left-arrow{
+  width: 0.48rem;
+  height: 0.48rem;
+  margin-left: 0.44rem;
+}
+.title{
+  flex: 1;
+  text-align: center;
+  margin-right: 0.44rem;
+  font-size: 0.36rem;
+  font-weight: 500;
+  color: rgba(51, 51, 51, 0.85);
+}
+.tag-wrap{
+  /* width: 100%; */
+  height: 0.8rem;
+  display: flex;
+  align-items: center;
+  padding-left: 0.58rem;
+  overflow-x: auto;
+  box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 0, 0, 0.05);
+  border-radius: 0 0 0.2rem 0.2rem;
+}
+.tag-item{
+  min-width: 0.6rem;
+  padding-bottom: 0.06rem;
+  margin-right: 0.84rem;
+  font-size: 0.28rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+}
+.active{
+  border-bottom: 0.06rem solid #3B7FFF;
+}
+.download-item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 6.5rem;
+  height: 1.4rem;
+  border-radius: 0.32rem;
+  margin: 0.36rem 0.3rem;
+  padding: 0 0.2rem;
+  background: #FFFFFF;
+}
+.main-wrap{
+  display: flex;
+}
+.app-icon{
+  align-self: flex-start;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-top: -0.46rem;
+  border-radius: 0.32rem;
+  border: 0.02rem solid #EBEBEB;
+  background-color: #666666;
+}
+.app-wrap{
+  margin-left: 0.2rem;
+}
+.app-title{
+  font-size: 0.32rem;
+  font-weight: 500;
+  color: #333333;
+}
+.app-description{
+  font-size: 0.26rem;
+  color: #666666;
+}
+.btn-wrap{
+  position: relative;
+  width: 1.2rem;
+  height: 0.54rem;
+  line-height: 0.54rem;
+  text-align: center;
+  background: linear-gradient(180deg, #6DB6FF 0%, #3B7FFF 100%);
+  border-radius: 0.16rem;
+  font-size: 0.24rem;
+  color: #FFFFFF;
+  overflow: hidden;
+}
+
+.btn-active{
+  width: 1.16rem;
+  height: 0.5rem;
+  background: #FFFFFF;
+  border: 0.04rem solid #3B7FFF;
+  color: rgba(59, 127, 255, 1);
+}
+
+.progress{
+  position: absolute;
+  left: -1.2rem;
+  width: 1.2rem;
+  height: 0.54rem;
+  background: rgba(59, 127, 255, 0.3);
+}
+
+.none-wrap{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.none-img{
+  width: 4.82rem;
+  height: 2.6rem;
+}
+
+.none-text{
+  text-align: center;
+  margin-top: 0.4rem;
+  font-size: 0.26rem;
+  color: #BBBBBB;
+}
+
+#toast-container>.toast-error {
+  background-image: none !important;
+}
+
+.toast-error {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+#toast-container>div {
+  font-size: 14px;
+  min-width: 80px !important;
+  padding: 12px !important;
+  box-shadow: none;
+}
+
+.toast-center-center {
+  min-width: 100px;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+@media (max-width: 480px) and (min-width: 241px) {
+  #toast-container>div {
+    min-width: 80px !important;
+    width: auto;
+  }
+}

microserviceUserH5/static/js/vender/config.js

@@ -1,6 +1,7 @@
 var url = window.location.href;
 url = url.split('/');
 var baseUrl = url[0] + '//' + url[2];
+// var baseUrl = 'http://14.18.190.141:24380'
 // var baseUrl = 'http://prese.phone.androidscloud.com'
 // var baseUrl = 'http://vclusters.imwork.net:2221'
 

microserviceUserH5/vcloud/browser.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
+	<title>双子星浏览器</title>
+	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
+	<script src="../static/js/vender/vue/axios.min.js"></script>
+	<script src="../static/js/vender/jquery-3.4.1.min.js"></script>
+	<script src="../static/js/vender/vue/vue.min.js"></script>
+	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
+	<script src="../static/js/vender/config.js"></script>
+	<link rel="stylesheet" href="../static/css/browser.css">
+	<script src="../static/js/vender/vue/config.js"></script>
+    <script type="text/javascript">
+        var deviveWidth = document.documentElement.clientWidth;
+        document.documentElement.style.fontSize = deviveWidth / 7.5 + 'px';
+    </script>
+</head>
+<body>
+	<div class="container">
+		<div class="logo-row">
+			<img class="logo" src="../static/img/browser/logo.png" />
+		</div>
+		<div class="search-wrap">
+			<img class="search-icon" id="search-icon" src="../static/img/browser/search-icon.png" />
+			<input class="ipt" id="ipt" placeholder="搜索或输入网址" />
+		</div>
+		<div class="tag-wrap" id="tag-wrap"></div>
+	</div>
+<script type="text/javascript">
+	const tagDom = document.getElementById("tag-wrap");
+	(function(){
+		init();
+	})();
+	function init(){
+		$.ajax({
+				url: `${baseUrl}/api/public/v1/browserPlate/client/query`,
+				type: 'get',
+				contentType:"application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					let list = res.data;
+					let node = '';
+					for(let i=0; i < list.length; i++){
+						node += `<div class="tag-item" data-plateName="${list[i].plateName}" data-id="${list[i].id}">
+								<img class="icon-row" data-plateName="${list[i].plateName}" data-id="${list[i].id}" src=${fileCenterApi}/document/newFile/download/0/3dn9b4585511476691c6?fileKey=${list[i].iconImage} />
+								<div class="icon-title" data-plateName="${list[i].plateName}" data-id="${list[i].id}">${list[i].plateName}</div>
+								<img class="right-arrow" src="../static/img/browser/right-arrow.png" data-plateName="${list[i].plateName}" data-id="${list[i].id}" />
+							</div>`
+					}
+					tagDom.innerHTML = node;
+				}
+		})
+	};
+	tagDom.addEventListener('click',(e)=>{
+		let plateName = e.target.dataset.platename;
+		let id = e.target.dataset.id;
+		$.ajax({
+				url: `${baseUrl}/api/public/v1/browserPlate/reportClickNum/${id}`,
+				type: 'get',
+				contentType:"application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(res.status === 0){
+						location.href = `./browserDetail.html?plateName=${plateName}&plateId=${id}`;
+					}
+				}
+			})
+	},false);
+	//点击按钮搜索
+	const searchDom = document.getElementById("search-icon");
+	searchDom.addEventListener('click',()=>{
+		var key = document.getElementById("ipt").value;
+		var wd = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=" + key;
+		window.open(wd);
+	},false);
+</script>
+</body>
+</html>

microserviceUserH5/vcloud/browserDetail.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
+	<title>双子星浏览器</title>
+	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
+	<script src="../static/js/vender/vue/axios.min.js"></script>
+	<script src="../static/js/vender/vue/vue.min.js"></script>
+	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
+	<link rel="stylesheet" href="../static/css/browserDetail.css">
+	<script src="../static/js/vender/jquery-3.4.1.min.js"></script>
+	<script src="../static/js/vender/config.js"></script>
+	<script src="../static/js/vender/toastr/toastr.min.js"></script>
+	<script src="../static/js/vender/vue/config.js"></script>
+    <script type="text/javascript">
+        var deviveWidth = document.documentElement.clientWidth;
+        document.documentElement.style.fontSize = deviveWidth / 7.5 + 'px';
+    </script>
+</head>
+<body>
+	<div class="container">
+		<div class="header-wrap">
+			<div class="search-wrap" id="search-wrap">
+				<img class="search-icon" src="../static/img/browser/search-icon2.png" />
+				<div class="ipt" id="ipt">双子星浏览器</div>
+			</div>
+			<div class="title-wrap">
+				<img class="left-arrow" src="../static/img/browser/left-arrow.png" />
+				<div class="title"></div>
+			</div>
+			<div class="tag-wrap"></div>
+		</div>
+		<div class="download-wrap"></div>
+	</div>
+	<!-- <input type="file" name="photo" id="photo" value=""> -->
+<script type="text/javascript">
+	let title = GetRequest().plateName;
+	let timer,flag = true;
+	let labelId = '', pageNum = 1, pageSize = 10, index = 0;
+	$('.title').eq(0).text(title);
+	(function(){
+		init();
+	})();
+	function init(){
+		$.ajax({
+				url: `${baseUrl}/api/public/v1/browserLabel/client/query/${GetRequest().plateId}`,
+				type: 'get',
+				contentType:"application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					let list = res.data;
+					labelId = list[0].id;
+					rankingGet();
+					let node = '';
+					for(let i=0; i < list.length; i++){
+						node += `<div class="tag-item ${i === index ? 'active' : ''}" data-id="${list[i].id}" data-index="${i}">${list[i].labelName}</div>`
+					}
+					$('.tag-wrap').eq(0).append(node);
+				}
+		})
+	};
+	function rankingGet(){
+		$.ajax({
+			url: `${baseUrl}/api/public/v1/ranking/client/get`,
+			type: 'post',
+			data: JSON.stringify({
+				labelId: labelId,
+				phoneType: 'SVIP',
+				pageNum: pageNum,
+				pageSize: pageSize
+			}),
+			contentType:"application/json",
+			dataType: 'json',
+			cache: false,
+			success: function (res) {
+				if(res.status === 0){
+					let list = res.data.records;
+					let node = '';
+					for(let i=0; i < list.length; i++){
+						node += `<div class="download-item">
+									<div class="main-wrap">
+										<img class="app-icon" src=${fileCenterApi}/document/newFile/download/0/3dn9b4585511476691c6?fileKey=${list[i].iconKey} />
+										<div class="app-wrap">
+											<div class="app-title">${list[i].appName}</div>
+											<div class="app-description">${list[i].introduction}</div>
+										</div>
+									</div>
+									<div class="btn-wrap" data-key="${list[i].fileKey}" data-id="${list[i].id}" data-index="${i}" data-md5="${list[i].md5}">
+										<div class="progress" data-key="${list[i].fileKey}" data-id="${list[i].id}" data-index="${i}" data-md5="${list[i].md5}"></div>
+										<text class="text" data-key="${list[i].fileKey}" data-id="${list[i].id}" data-index="${i}" data-md5="${list[i].md5}">下载</text>
+									</div>
+								</div>`
+					}
+					if(list.length === 0){
+						node = `<div class="none-wrap">
+									<img class="none-img" src="../static/img/browser/none.png" />
+									<div class="none-text">没有更多内容哦~</div>
+								</div>`
+					}
+					$('.download-wrap').eq(0).append(node);
+				}else{
+					stopManyClick(() => {
+						toastr.error(res.msg);
+					})
+				}
+			}
+		})
+	};
+	$('.tag-wrap')[0].addEventListener('click',(e)=>{
+		labelId = e.target.dataset.id;
+		let className = e.target.className;
+		if(className.includes('tag-item')){
+			$('.download-wrap').eq(0).text('');
+			$('.tag-item')[index].className = 'tag-item';
+			index = e.target.dataset.index;
+			$('.tag-item')[index].className = 'tag-item active';
+			rankingGet();
+		}
+	},false);
+	// 点击下载按钮
+	$('.download-wrap')[0].addEventListener('click',(e)=>{
+		let key = e.target.dataset.key;
+		let md5 = e.target.dataset.md5;
+		let index = e.target.dataset.index;
+		let id = e.target.dataset.id;
+		let className = e.target.className;
+		if(className === 'btn-wrap btn-active'){
+			return
+		}
+		if(['btn-wrap','progress', 'text'].includes(className)){
+			$('.btn-wrap')[index].className = 'btn-wrap btn-active';
+			$.ajax({
+				url: `${baseUrl}/api/public/v1/ranking/getstatus/${id}`,
+				type: 'get',
+				contentType:"application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(res.status === 0){
+						const downloadUrl = `${fileCenterApi}/document/newFile/breakpointDownloadFile/3dn9b4585511476691c6?fileKey=${key}`;
+						window.location.href = downloadUrl;
+						let xhr = new XMLHttpRequest();
+						xhr.open('GET', downloadUrl, true);
+						xhr.addEventListener('progress', function (event) {
+							// 响应头要有Content-Length
+							if (event.lengthComputable) {
+								let percentComplete = event.loaded / event.total;
+								// 进度条的位置也是translate，一开始是用translateX(-100%)挪到外面去
+								$('.progress')[0].style.transform = `translateX(${percentComplete * 100}%)`;
+								$('.text').eq(0).text(`${(percentComplete * 100).toFixed(1)}%`);
+							}
+						}, false);
+						xhr.send();
+						// var formData = new FormData();
+						// formData.append("file",$("#photo")[0].files[0]);
+						// $.ajax({
+						// 	url: `${baseUrl}/document/file/breakUpload`,
+						// 	type: 'post',
+						// 	headers: {
+						// 		'file-access-key': '3dn9b4585511476691c6',
+						// 		'md5': md5
+						// 	},
+						// 	data: formData,
+						// 	contentType: false,
+        				// 	processData: false,
+						// 	cache: false,
+						// 	success: function (res) {
+						// 		console.log(res)
+						// 		if(res.status === 0){
+						// 		}
+						// 	}
+						// })
+					} else {
+						stopManyClick(() => {
+							toastr.error(res.msg);
+						})
+					}
+				}
+			})
+		}
+	},false);
+	//防止提示一秒内重复显示
+	function stopManyClick(fn) {
+		if (flag) {
+			fn();
+		}
+		flag = false;
+		if(timer){clearTimeout(timer);}
+		timer = setTimeout(() => {flag = true}, 1500);
+	}
+	//点击按钮搜索
+	const searchDom = document.getElementById("search-wrap");
+	searchDom.addEventListener('click',()=>{
+		var wd = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu";
+		window.open(wd);
+	},false);
+</script>
+</body>
+</html>