原生H5 520兴趣项目演示

╰半夏微凉° 2023-03-14 13:20 114阅读 0赞

代码已上传至github  
github代码地址：https://github.com/Miofly/mio.git

![20200518092109697.gif][]

移动端适配

<!DOCTYPE html>
    <html lang="en" style="overflow: hidden!important;">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    	<meta http-equiv=X-UA-Compatible content="ie=edge">
    	<meta name=apple-mobile-web-app-capable content=yes>
    	<meta name=apple-touch-fullscreen content=yes>
    	<meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
    	<meta name=format-detection content="telephone=no">
    	<meta name=format-detection content="email=no">
    	<meta name=renderer content=webkit>
    	<meta name=screen-orientation content=portrait>
    	<meta name=x5-orientation content=portrait>
    	<meta name=x5-fullscreen content=true>
    	<meta name=full-screen content=yes>
    	<meta name=keywords content="">
    	<meta name=description content="">
    	<meta http-equiv=Content-Type content="text/html; charset=utf-8">
    	<title>Title</title>
    	<link rel="stylesheet" type="text/css" href="css/index.css"/>
    	<script type="text/javascript" src="../../js/common/vue.js"></script>
    	<script type="text/javascript" src="../../js/common/jquery-1.7.2.min.js"></script>
    	<script>
            (function (doc, win) {
                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        if (clientWidth >= 375) {
                            docEl.style.fontSize = '100px';
                        } else {
                            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
                        }
                        var html = document.getElementsByTagName('html')[0];
                        var settedFs = settingFs = parseInt(100 * (clientWidth / 375));
                        var whileCount = 0;
                        while (true) {
                            var realFs = parseInt(window.getComputedStyle(html).fontSize);
                            var delta = realFs - settedFs;
                            //不相等
                            if (Math.abs(delta) >= 1) {
                                if (delta > 0)
                                    settingFs--;
                                else
                                    settingFs++;
                                html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
                            } else
                                break;
                            if (whileCount++ > 100)
                                break
                        }
                    };
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
    	</script>
    	<style>
    		@keyframes scale-up {
    			0% {
    				transform: scale(1)
    			}
    			100% {
    				transform: scale(1.1)
    			}
    		}
    	</style>
    </head>

html

<body style="font-size: 0.05rem;background: rgb(248, 236, 233);overflow: hidden!important;">
    <div id="app" style="height: 100%">
    	<div v-if="status">
    		<div>
    			<img :src="bgImg" style="width: 100%;position: fixed;top: 0.05rem;left: 0;text-align: center">
    		</div>
    		<div @click="status = false" style="animation: scale-up 1s linear 0s infinite alternate;position: fixed;left: 0;bottom: 0.5rem;width: 100%;text-align: center">
    			<img :src="main" style="width: 2.06rem;height: 0.68rem">
    		</div>
    	</div>
    
    	<div v-if="!status" style="height: 100%">
    		<div style="width: 100%;text-align: center">
    			<img :src="avatar" style="width: 1.24rem;height: 1.24rem">
    		</div>
    
    		<div style="width: 100%;text-align: center">
    			<span style="width:2.37rem;height:0.28rem;font-size:0.20rem;font-weight:500;color:rgba(0,0,0,1);">请选择你的1-6个出租项目</span>
    			<img @click="random" :src="sjImg" style="width: 0.66rem;height: 0.28rem;margin-left: 0.1rem;margin-top: -0.06rem;">
    		</div>
    
    		<div style="margin-top: 0.18rem;height: 63%;overflow-y: scroll;overflow-x: hidden">
    			<div @click="choiceBtn(index)" style="position: relative;float: left;margin-left: 0.08rem;margin-top: 0.18rem;" v-for="(item, index) in lists" :key="index">
    				<img :src="bgIndex.includes(index) ? '../../img/love/Button1@2x.png' : '../../img/love/Button2@2x.png'" style="width: 1.13rem;height: 0.48rem;">
    				<span style="position: absolute;top: 0.1rem;width:0.96rem;height:0.22rem;font-size:0.16rem;font-weight:600;"
    					  :style="{color: bgIndex.includes(index) ? 'white' : '#DD3333', left: item.name.length == 7 ? '0.12rem' : item.name.length == 3 ?
    					  '0.32rem' : item.name.length >= 5 ? '0.18rem' : '0.24rem'}"
    				>{
       {item.name}}</span>
    			</div>
    			<div style="position: fixed; bottom: 0rem;left: 0;width: 100%;text-align: center">
    				<img :src="scPoster" style="width: 2.06rem;height: 0.68rem" @click="chosen"></img>
    			</div>
    		</div>
    
    		<div v-if="modalStatus" style="position: fixed;top: 45%;width: 80%;left: 10%;background: white;border: 2px solid red;border-radius: 0.1rem;text-align: center;padding: 0.35rem 0;font-size: 0.2rem;font-weight: 600;">
    			{
       {ts}}
    		</div>
    	</div>
    </div>

[20200518092109697.gif]: /images/20230312/cd53d16c90e749dc8f85e8d8a9f26058.png