chore: case.md

30622da5 · DCloud_LXH · 7c7b544e · 30622da5 · 30622da5 · 30622da5
5 changed file
--- a/docs/.vuepress/components/md/banner.vue
+++ b/docs/.vuepress/components/md/banner.vue
+<template>
+	<div class="banner">
+		<div class="slider">
+			<span class="slider-btn slider-btn-left"></span>
+			<span class="slider-btn slider-btn-right"></span>
+			<div class="slider-group">
+				<template v-for="item in images">
+					<div class="slider-item" :key="item">
+						<img :src="item" />
+					</div>
+				</template>
+				<!-- <div class="slider-item">
+                <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/case/case5.png">
+            </div> -->
+				<!-- <div class="slider-item">
+                <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/case/case7.png">
+            </div> -->
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				images: [
+					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/41136990-4f3e-11eb-8ff1-d5dcf8779628.png',
+					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3ecf6d00-4f3e-11eb-8ff1-d5dcf8779628.png',
+					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3df62400-4f3e-11eb-8ff1-d5dcf8779628.png',
+					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3f872440-4f3e-11eb-8a36-ebb87efcf8c0.png',
+					'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/40596860-4f3e-11eb-bdc1-8bd33eb6adaa.png',
+				],
+			};
+		},
+		mounted() {
+			this.StartBanner();
+		},
+		methods: {
+			StartBanner() {
+				var banner = document.querySelector('.banner'),
+					slider = document.querySelector('.slider-group'),
+					sliderItems = document.querySelectorAll('.slider-item'),
+					sliderLength = sliderItems.length;
+				var bannerWidth = null,
+					index = 1; //slider下标
+				var arrowLeft = document.querySelector('.slider-btn-left'),
+					arrowRight = document.querySelector('.slider-btn-right');
+
+				//创建dots
+				var sliderDots = document.createElement('div');
+				sliderDots.className = 'slider-dots';
+				var dots = '<span class="dot active" data-num="0"></span>';
+				for (var i = 1; i < sliderLength; i++) {
+					dots += '<span class="dot" data-num="' + i + '"></span>';
+				}
+				sliderDots.innerHTML = dots;
+				document.querySelector('.slider').appendChild(sliderDots);
+
+				//在第一个前、最后一个后各加一个item
+				var last_item = document.createElement('div'),
+					next_item = document.createElement('div');
+				last_item.className = 'slider-item';
+				last_item.innerHTML = sliderItems[sliderItems.length - 1].innerHTML;
+				slider.insertBefore(last_item, sliderItems[0]);
+				next_item.className = 'slider-item';
+				next_item.innerHTML = sliderItems[0].innerHTML;
+				slider.appendChild(next_item);
+
+				sliderItems = document.querySelectorAll('.slider-item');
+
+				function setSlider() {
+					bannerWidth = banner.offsetWidth;
+					for (var i = 0, length = sliderItems.length; i < length; i++) {
+						sliderItems[i].style.width = bannerWidth + 'px';
+					}
+					slider.style.width = sliderItems.length * bannerWidth + 'px';
+					slider.style.transition = 'transform 0ms';
+					slider.style.transform = 'translate(' + -index * bannerWidth + 'px, 0px)';
+				}
+				setSlider();
+				window.onresize = setSlider;
+				var sliderTime = setInterval(sliderStart, 5000);
+
+				function sliderStart() {
+					//开始轮播)
+					/* if(!~location.pathname.indexOf($docsify.banner)){
+            clearInterval(sliderTime);
+            return;
+        } */
+					index += 1;
+					if (index < 0 || index > sliderLength + 1) {
+						index = index < 0 ? 0 : sliderLength + 1;
+					}
+					slider.style.transition = 'transform 300ms';
+					document.querySelector('.active.dot').classList.remove('active');
+					var dotIndex = index > sliderLength ? 0 : index < 1 ? sliderLength - 1 : index - 1;
+					sliderDots.children[dotIndex].classList.add('active');
+					slider.style.transform = 'translate(' + -index * bannerWidth + 'px, 0px)';
+					setTimeout(function () {
+						if (index > sliderLength || index < 1) {
+							index = index > sliderLength ? 1 : sliderLength;
+							slider.style.transition = 'transform 0ms';
+							slider.style.transform = 'translate(' + -index * bannerWidth + 'px, 0px)';
+						}
+					}, 300);
+				}
+				var mouseClearSlider = false;
+				sliderDots.addEventListener('mouseover', function (e) {
+					showArrow();
+					if (e.target.tagName === 'SPAN') {
+						mouseClearSlider = true;
+						clearInterval(sliderTime);
+						if (e.target.className === 'dot') {
+							slider.style.transition = 'transform 300ms';
+							document.querySelector('.active.dot').classList.remove('active');
+							e.target.classList.add('active');
+							index = Number(e.target.dataset.num) + 1;
+							slider.style.transform = 'translate(' + -index * bannerWidth + 'px, 0px)';
+						}
+						return;
+					}
+					if (mouseClearSlider) {
+						mouseClearSlider = false;
+						clearInterval(sliderTime);
+						sliderTime = setInterval(sliderStart, 5000);
+					}
+				});
+				sliderDots.addEventListener('mouseout', function (e) {
+					hideArrow();
+					if (mouseClearSlider) {
+						mouseClearSlider = false;
+						clearInterval(sliderTime);
+						sliderTime = setInterval(sliderStart, 5000);
+					}
+				});
+				// 处理 banner 的两个箭头
+				document.querySelector('.slider').addEventListener('mouseover', showArrow);
+				document.querySelector('.slider').addEventListener('mouseout', hideArrow);
+				arrowLeft.addEventListener('mouseover', showArrow);
+				arrowLeft.addEventListener('mouseout', hideArrow);
+				arrowRight.addEventListener('mouseover', showArrow);
+				arrowRight.addEventListener('mouseout', hideArrow);
+
+				function showArrow() {
+					//显示箭头
+					arrowLeft.style.display = 'block';
+					arrowRight.style.display = 'block';
+					// 		var scroll_left = document.documentElement.scrollLeft;
+					// 		arrowLeft.style.left = scroll_left + "px";
+					// 		arrowRight.style.right = document.documentElement.scrollWidth - document.documentElement.clientWidth - scroll_left +
+					// 			'px';
+				}
+
+				function hideArrow() {
+					//隐藏箭头
+					arrowLeft.style.display = 'none';
+					arrowRight.style.display = 'none';
+				}
+				arrowLeft.addEventListener('click', function () {
+					index -= 2;
+					clearInterval(sliderTime);
+					sliderStart();
+					sliderTime = setInterval(sliderStart, 5000);
+				});
+				arrowRight.addEventListener('click', function () {
+					clearInterval(sliderTime);
+					sliderStart();
+					sliderTime = setInterval(sliderStart, 5000);
+				});
+			},
+		},
+	};
+</script>
+<style>
+	/* banner */
+	.banner {
+		width: 100%;
+		margin: 0 auto;
+		overflow: hidden;
+	}
+
+	.slider {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.slider-btn {
+		position: absolute;
+		cursor: pointer;
+		width: 41px;
+		height: 69px;
+		top: 50%;
+		transform: translateY(-50%);
+		-webkit-transform: translateY(-50%);
+		z-index: 20;
+		display: none;
+		background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/d2c41062-9e93-478f-9c06-06778b0f2c84.png);
+	}
+
+	.slider-btn.slider-btn-left {
+		left: 0;
+	}
+
+	.slider-btn.slider-btn-right {
+		right: 0;
+		background-position-x: 41px;
+	}
+
+	.slider-item {
+		float: left;
+		width: 100%;
+	}
+
+	.slider .slider-dots {
+		display: none;
+		position: absolute;
+		line-height: 0;
+		left: 50%;
+		bottom: 5px;
+		transform: translateX(-50%);
+		-webkit-transform: translateX(-50%);
+		text-align: center;
+		font-size: 0;
+	}
+
+	.slider .dot {
+		display: inline-block;
+		margin: 0 5px;
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		background: #ccc;
+		cursor: pointer;
+	}
+
+	.slider .dot.active {
+		width: 30px;
+		border-radius: 10px;
+		background: rgb(225, 114, 0);
+	}
+
+	/* 修改左侧导航 */
+	.sidebar .sidebar-nav {
+		padding: 0 0 11px 0;
+	}
+
+	.sidebar ul {
+		padding-left: 15px;
+	}
+
+	.sidebar ul li a:hover {
+		text-decoration: none;
+		background-color: #eff1f3;
+	}
+
+	.sidebar ul li.active > a:hover {
+		background-color: #ffffff;
+	}
+
+	.sidebar::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	/* 处理左侧导航的折叠问题TODO */
+	.sidebar-nav-li.close ul {
+		display: none;
+	}
+
+	.sidebar-nav-li .chapter {
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		position: relative;
+		cursor: pointer;
+	}
+
+	.sidebar-nav-li .chapter:hover {
+		background-color: #eff1f3;
+	}
+
+	.sidebar-nav-li .chapter:before {
+		position: absolute;
+		top: 10px;
+		left: -16px;
+		content: '\e581';
+		font-family: 'uniicons';
+		font-style: normal;
+		font-weight: 600;
+		line-height: 1;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: greyscale;
+		color: #8d8d8d;
+		font-size: 10px;
+	}
+
+	.sidebar-nav-li.close .chapter:before {
+		content: '\e583';
+	}
+</style>
--- a/docs/.vuepress/theme/config/siderbar/uniCloud.js
+++ b/docs/.vuepress/theme/config/siderbar/uniCloud.js
@@ -33,6 +33,11 @@ export default {
    },
    {
      "number": "599819864",
+      "state": 1,
+      attendance: 1000
+    },
+    {
+      "number": "641753405",
      "state": 0
    },
  ]

--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -15,20 +15,18 @@
      @click="toggleSidebar(false)"
    />

-    <ClientOnly>
-      <Sidebar
-        :items="sidebarItems"
-        @toggle-sidebar="toggleSidebar"
-      >
-        <template #top>
-          <slot name="sidebar-top" />
-        </template>
-        <template #bottom>
-          <slot name="sidebar-bottom" />
-          <SiderBarBottom />
-        </template>
-      </Sidebar>
-    </ClientOnly>
+    <Sidebar
+      :items="sidebarItems"
+      @toggle-sidebar="toggleSidebar"
+    >
+      <template #top>
+        <slot name="sidebar-top" />
+      </template>
+      <template #bottom>
+        <slot name="sidebar-bottom" />
+        <SiderBarBottom />
+      </template>
+    </Sidebar>

    <Home v-if="$page.frontmatter.home" />

@@ -183,7 +181,7 @@ export default {
  },
  watch: {
    isSidebarOpen: forbidScroll,
-    $route(){
+    $route() {
      this.renderNavLinkState()
    }
  }

--- a/docs/case.md
+++ b/docs/case.md
--- a/docs/uniCloud/_sidebar.md
+++ b/docs/uniCloud/_sidebar.md
@@ -58,55 +58,3 @@
 * [微信云开发转uniCloud](uniCloud/wx2unicloud.md)
 * [uniCloud产品服务协议](uniCloud/agreement.md)
 * [更新日志](uniCloud/release.md)
-<li></li>
-<div class="contact-box">
-  <a href="//unicloud.dcloud.net.cn" target="_blank" class="contact-item">
-  	<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7962e8e0-4f2d-11eb-a16f-5b3e54966275.jpg" width="20" height="20"/>
-  	<div class="contact-smg">
-  		<div>uniCloud Web控制台</div>
-  	</div>
-  </a>
-  <a href="//ask.dcloud.net.cn/explore/" target="_blank" class="contact-item">
-  	<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/73fc4f90-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
-  	<div class="contact-smg">
-  		<div>论坛</div>
-  	</div>
-  </a>
-  <a href="https://uniad.dcloud.net.cn" target="_blank" class="contact-item">
-    <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/765d9820-4f2d-11eb-bd01-97bc1429a9ff.png" width="20" height="20"/>
-    <div class="contact-smg">
-      <div>uniAD</div>
-    </div>
-  </a>
-  <a href="https://tongji.dcloud.net.cn/" target="_blank" class="contact-item">
-    <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/77159d80-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
-    <div class="contact-smg">
-      <div>uni统计</div>
-    </div>
-  </a>
-	<div class="contact-item">
-		<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/74cda950-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
-		<div class="contact-smg">
-			<div>
-	      代码仓库：<a href="https://gitee.com/dcloud/uni-app" target="_blank">码云</a>、<a href="http://github.com/dcloudio/uni-app" target="_blank">GitHub</a>
-	    </div>
-		</div>
-	</div>
-	<div class="contact-item">
-	  <img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/759713d0-4f2d-11eb-a16f-5b3e54966275.png" width="20" height="20"/>
-	  <div class="contact-smg">
-	  <div>uniCloud QQ交流群</div>
-	  <div>群1：1012245137 (2000人已满)</div>
-    <div>群2：749911289 (1000人已满)</div>
-<div>群3：599819864 (1000人已满)</div>
-    <div>群4：641753405 &nbsp;<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=n8Qk7gMN-ppFly_vE9_S34hLNXz25PVI&jump_from=webapi">点此加入</a></div>
-	  </div>
-	</div>
-  <div class="contact-item">
-  	<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/77df7d30-4f2d-11eb-bd01-97bc1429a9ff.png" width="20" height="20"/>
-  	<div class="contact-smg">
-  		<div>关注微信公众号</div>
-  		<img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/78a8e7b0-4f2d-11eb-8ff1-d5dcf8779628.jpg" width="90" height="90"/>
-  	</div>
-  </div>
-</div>