开源的index.html,index.html-优快云博客

本文介绍了Omi前端框架及其相关资源，包括Omi Docs、Omiu Docs、Components Studio、WebComponents.dev、Omi+Kbone、Omix+小程序和Omi与React的结合使用。此外，还提供了一个简单的计数器组件示例，展示了Omi的用法。文章最后提及了根据屏幕尺寸调整元素位置的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Omi - Front End Cross-Frameworks Framework

html,

body {

padding: 0;

margin: 0;

overflow-x: hidden;

}

canvas {

padding: 0;

margin: 0;

border: 0;

}

#container {

text-align: center;

}

body {

background-color: #302f33;

/*opacity: 0;*/

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

text-transform: uppercase;

font-size: 12px;

letter-spacing: 2px;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

/*body.ready { opacity: 1; }*/

.icon-text path,

.icon-text polygon {

/*opacity: 0;*/

}

.info {

text-align: center;

}

.description {

/*opacity: 0;*/

color: white;

margin-top: 20px;

}

.links {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

@media (min-width: 700px) {

.links {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

}

.button {

/*opacity: 0;*/

position: relative;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 180px;

height: 60px;

text-decoration: none;

}

.button.blue {

color: #5E89FB;

}

.button.green {

color: #07C160;

}

.button.red {

color: #F95050;

}

.button svg {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

stroke-width: 1;

fill: none;

fill-rule: evenodd;

stroke: currentColor;

}

.button.green svg {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.button path {

scale: .9;

transform-origin: 50% 50%;

}

.credits {

/*opacity: 0;*/

margin-top: 20px;

color: #979797;

}

.credits a {

position: relative;

color: currentColor;

text-decoration: none;

}

.credits a:after {

content: "";

/*opacity: 0;*/

display: block;

position: absolute;

left: 0;

bottom: -3px;

width: 100%;

border-bottom: 1px solid currentColor;

transition: opacity .75s ease;

}

/*.credits a:hover:after {

opacity: 1;

transition: opacity .25s ease;

}*/

.credits a,

.credits span {

transition: color .75s ease;

}

.credits a:hover,

.highlighted {

color: white;

transition: color .25s ease;

}

#container {

margin-top: 100px;

}

#container img {

width: 150px;

}

@media only screen and (max-width: 500px) {

#container canvas {

width: 100%;

}

#container img {

width: 80px;

}

#container {

margin-top: 25px;

}

#wp {

z-index: 10;

}

Front End Cross-Frameworks Framework

target="_blank">

d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z">

Omi Docs

Omiu Docs

Components.Studio

webcomponents.dev

GitHub

import { define, render } from 'omi'

class Store {

data = {

count: 1

}

sub = () => {

this.data.count--

}

add = () => {

this.data.count++

}

define('my-counter', _ =>

<span>{_.store.data.count}</span>

</>, {

use: ['count']

}

))

render(<my-counter />, 'body', new Store)

function detectMobile() {

if (window.innerWidth <= 800 && window.innerHeight <= 900) {

return true;

} else {

return false;

}

if (detectMobile()) {

document.getElementById('wp').style.marginTop = (window.innerHeight - 600) / 2 + 'px'

} else {

document.getElementById('wp').style.marginTop = (window.innerHeight - 700) / 2 + 'px'

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史