master

分支 (1)

管理

管理

master

trend
/
harmony.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的鸿蒙实战开发</title>
    <link rel="stylesheet" href="styles.css">
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
            color: #333;
            width: 100%;
            height: 100%;
        }
        /* 主容器的通用样式 */
        #harmony_body {
            width: 100%;
            height: 100%;
            max-width: 95%;
            margin: 20px auto;
            padding: 20px;
 /*           background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
            display: flex;
            flex-direction: column;
        }
        /* 代码区域的样式 */
        #harmony_code {
            width: 100%;
            height: 100%;
            overflow: auto; /* 如果代码溢出，添加滚动条 */
            background-color: #f8f8f8; /* 代码区域的背景颜色 */
            border-radius: 5px; /* 圆角 */
            padding: 10px; /* 代码区域的内边距 */
        }
        /* 代码文本的样式 */
        #harmony_code p {
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
            white-space: pre-wrap; /* 保留换行 */
        }
		#harmony_area{
			width: 100%;
			height: 100%;
			padding-left: 20px;
			padding-right: 20px;
		}
		#harmony_areatotal{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
		}
		#harmony_arealeft{
			width: 76%;
			height: 100%;
			margin-right: 2%;
		}
		#harmony_videoarea{
			width: 200px;
			height: 470px;
			position: fixed; /* 让视频区域悬浮在固定位置 */
			top: 150px; /* 距离页面顶部的距离 */
			right: 20px; /* 距离页面右侧的距离 */
			padding-left: 20px;
			margin-left: 20px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		#harmony_video{
			width: 90%;
			height: 80%;
			height: auto; /* 让视频自适应宽度 */
			border-radius: 5px;
		}
		#harmony_foot{
			padding-left: 20px;
		}
		.harmony_titile{
			align-items: center;
			text-align: center;
		}
		#harmony_pac{
			display: flex;
			flex-direction: row;
		}

		/* 动画 */
		        .pacMan {
		            display: inline-block;
		            position: relative;
		            margin-top: 10px;
					margin-left: 10px;
					width: 20px;
					height: 20px;
		        }

		        /* 使用伪元素创建吃豆人的眼睛 */
		        .pacMan::before {
		            content: '';
		            width: 0.4em;
		            height: 0.4em;
		            border-radius: 50%;
		            background-color: #333;
		            position: absolute;
		            top: 6px;
		            left: 21px;
		            z-index: 2000;
		        }

		        /* mouth1搭配mouth2组成吃豆人张嘴闭嘴的动画 */
		        .mouth1 {
		            width: 0;
		            height: 0;
		            border: 25px solid #E1B204;
		            border-radius: 50%;
		            border-right-color: transparent;
		            animation: upup .32s 0s infinite;
		            position: relative;
		            z-index: 3;
		        }

		        @keyframes upup {
		            0% {
		                transform: rotate(270deg);
		            }

		            50% {
		                transform: rotate(1turn);
		            }

		            100% {
		                transform: rotate(270deg);
		            }
		        }

		        .mouth2 {
		            width: 0;
		            height: 0;
		            border: 25px solid #E1B204;
		            border-right-color: transparent;
		            border-radius: 25px;
		            margin-top: -50px;
		            animation: downdown .32s 0s infinite;
		            position: relative;
		            z-index: 3;
		        }

		        @keyframes downdown {
		            0% {
		                transform: rotate(90deg);
		            }

		            50% {
		                transform: rotate(0);
		            }

		            100% {
		                transform: rotate(90deg);
		            }
		        }

		        /* 豆子不断移动 */
		        .beanOne {
		            background-color: #E1B204;
		            border-radius: 50%;
		            width: 10px;
		            height: 10px;
		            position: absolute;
		            transform: translateY(-6px);
		            top: 25px;
		            left: 100px;
		            animation: beanAnimation 1s linear .52s infinite;
		        }

		        .beanTwo {
		            background-color: #E1B204;
		            border-radius: 50%;
		            width: 10px;
		            height: 10px;
		            position: absolute;
		            transform: translateY(-6px);
		            top: 25px;
		            left: 100px;
		            animation: beanAnimation 1s linear 1.1s infinite;
		        }


		        @keyframes beanAnimation {
		            75% {
		                opacity: .72;
		            }

		            100% {
		                transform: translate(-100px, -6px);
		            }
		        }
    </style>
</head>
<body>
    <div id="harmony_body">
        <div>
            <h1 class="harmony_titile">我的鸿蒙商城开发项目介绍</h1>
            <div id="harmony_area">
                <h2>项目简介</h2>
                <div>
                    <p>这是我开发的一个基于鸿蒙系统的商城应用，旨在提供优质的购物体验。</p>
                </div>
                <div id="harmony_areatotal">
                    <div id="harmony_arealeft">
                        <h2>相关代码</h2>
                        <div>
                            <p>以下是一些关键代码的示例：</p>
                        </div>
                        <div id="harmony_code">
							<h3>Home.ets</h3>
                            <p>
                                import {Shop} from '../components/shop';<br>
                                import router from '@ohos.router';<br>
                                import {user} from '../pages/user';<br>
                                @Entry<br>
                                @Component<br>
                                struct hometab {<br>
                                    build() {<br>
                                        Column() {<br>
                                            Tabs({barPosition:BarPosition.End}) {<br>
                                                TabContent() {<br>
                                                    Shop();<br>
                                                }<br>
                                                .tabBar('首页');<br>
                                                TabContent() {<br>
                                                    Text('推荐的内容').fontSize(30);<br>
                                                }<br>
                                                .tabBar('推荐');<br>
                                                TabContent() {<br>
                                                    Text('购物车').fontSize(30);<br>
                                                }<br>
                                                .tabBar('购物车');<br>
                                                TabContent() {<br>
                                                    user()<br>
                                                        .position({x:0,y:0});<br>
                                                }<br>
                                                .tabBar("我的");<br>
                                            }<br>
                                        }<br>
                                        .width('100%');<br>
                                        .height('100%');<br>
                                        .backgroundColor('#efefef');<br>
                                    }<br>
                                }<br>
                            </p>
							<h3>index.ets</h3>
							<p>
			import router from '@ohos.router';
			import promptAction from '@ohos.promptAction';
			@Builder function ImageBuilder(src) {
			  Image(src)
			    .width(50)
			    .height(50)
			    .margin({left:32})
			}
			@Entry
			@Component
			struct Index {
			  @State username :string = 'admin'
			  @State password :string = '123456'
			  build() {
			      Column() {
			        // Image($r('app.media.touxiang'))
			        // .width('40%')
			        // .height('18%')
			        // .margin({top:90})
			        LoadingProgress()
			          .color(Color.Blue)
			          .height(100)
			          .width(100)
			          .margin({top:120})
			          Text('添加HarmonyOS账号')
			            .fontSize(20)
			            .margin({top:12})
			            .fontWeight(FontWeight.Bold)
			        Text('登录账号以获取更多服务')
			          .fontColor('#999')
			          .fontSize(12)
			          .margin({top:3})
			        TextInput({placeholder:'输入用户名',text:this.username})
			          .margin({top:27, left:15,right:15})
			          .onChange((value)=>{
			            this.username=value
			          })
			        TextInput({placeholder:'输入密码',text:this.password})
			          .margin(15)
			          .type(InputType.Password)
			          .onChange((value)=>{
			           this.password=value
			          })
			        Button('登录')
			          .width('75%')
			          .onClick(() => {
			            if (this.username == 'admin' && this.password == '123456') {
			              router.pushUrl({
			                url:"pages/Home"
			              })
			              }
			            else {
			              promptAction.showToast({
			                message:'请输入正确的用户名密码'
			              })
			            }
			          })
			        Text('注册账号')
			          .fontColor('#36d')
			          .margin(10)
			          // .onClick(() => {
			          //
			          // })
			        Row({space:18}) {
			          ImageBuilder($r('app.media.num_1'))
			          ImageBuilder($r('app.media.num_2'))
			          ImageBuilder($r('app.media.num_3'))
			        }
			        .width('100%')
			        .height('10%')
			        .margin({top:165})
			        Text('其他方式登录')
			          .margin({top:5})
			          // .onClick(() => {
			          //   router.pushUrl({
			          //     url:"pages/Home"
			          //   })
			          // })
			      }
			      .width('100%')
			      .height('100%')
			      .padding(20)
			  }
			}
							</p>
							<h3>user.ets</h3>
							<p>
			import {Header} from '../components/CommonCom'
			import router from '@ohos.router';
			import { routeritem } from '../components/routercom';
			@Entry
			@Component
			export struct  user{
			 build() {
			   Column() {
			     Row(){
			       Image($r('app.media.touxiang'))
			         .width('20%')
			         .height('80%')
			         .margin(22)
			       Column(){
			         Text('登录账号')
			           .fontSize(25)
			           .onClick(() => {
			             router.push({
			               url:"pages/Index"
			             })
			           })
			           // .fontColor('#36D')
			         Row(){
			           Text('VIP')
			             .margin({right:22})
			             .fontSize(12)
			           Text('收获地址')
			             .fontSize(12)
			         }
			       }
			     }
			     .width('100%')
			     .height('12%')
			     .margin({top:10})
			     routeritem()
			       .width('100%')
			       .height('100%')
			   }
			   .width('100%')
			   .height('100%')
			   .backgroundColor('#efefef')
			   }
			}
							</p>
                        </div>
                    </div>
                    <div id="harmony_videoarea">
						<div id="harmony_pac">
                        <h2 style="color: #a81b00;">展示</h2>
						    <div class="pacMan">
						        <div class="eye"></div>
						        <div class="mouth1"></div>
						        <div class="mouth2"></div>
						        <div class="beanOne"></div>
						        <div class="beanTwo"></div>
						    </div>
						</div>
                        <video id="harmony_video" muted loop autoplay>
                            <source src="./media/harmony.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
            <div id="harmony_foot">
                <h2>其他信息</h2>
                <p>如果你对该项目有兴趣或有任何问题，请随时联系我。</p>
            </div>
        </div>
    </div>
</body>
<script>
	// // 获取视频区域元素
	// var videoArea = document.getElementById("harmony_videoarea");

	// // 获取视频区域初始位置距离页面顶部的距离
	// var initialOffset = videoArea.offsetTop;

	// // 监听页面滚动事件
	// window.addEventListener("scroll", function() {
	//     // 获取当前滚动位置距离页面顶部的距离
	//     var currentOffset = window.pageYOffset || document.documentElement.scrollTop;

	//     // 如果当前滚动位置超过视频区域初始位置，则固定视频区域
	//     if (currentOffset >= initialOffset) {
	//         videoArea.style.position = "fixed";
	//         videoArea.style.top = "0";
	//     } else {
	//         // 否则恢复视频区域原始样式
	//         videoArea.style.position = "absolute";
	//         videoArea.style.top = initialOffset + "px";
	//     }
	// });

</script>
</html>