Analysis of uniapp entry-level nvue climbing pit record

<template>
	<div>
        <text>{{text}}</text>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				text: 'Hello World'
			}
		}
	}
</script>

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]"></image>
</div>

<style src="@/common/test.css"></style>
<style>
   .test {
        color: #E96900;
   }
</style>

const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

uni.setStorageSync('test', 'hello');
uni.navigateTo({
    url:"/pages/nvue/nvue"
})

<script>
    export default {
        created() {
        	console.log("nvue created!");
            setTimeout(() => {
                uni.getStorage({
                	key:'test',
                    success: (res) => {
                    	console.log("Get the data passed from the previous page" + res.data)
                    }
                })
            },200)
        }
    }
</script>

<template>
    <div style="background-color: #ccc;">
        <div class="items">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>The content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down, the content can be stretched when arranged up and down. </text>
            </div>
        </div>
        <div class="items" style="flex-direction: row;">
            <div class="headImg"></div>
            <div class="rgtBox" style="flex: 1;">
                <text>The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right. The content cannot be stretched when arranged left and right.</text>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
    }
</script>
<style>
    .items {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        background-color: #fff;
    }
</style>

<template>
    <div style="background-color: #ccc;flex-direction: column;">
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>A short text, a short text</text>
            </div>
        </div>
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>Here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text, here is a long text</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {}
</script>
<style>
    .item {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        width: 600px;
        min-height: 100px;
        margin-left: 130px;
        margin-top: -100px; 
        background-color: #fff;
    }
</style>