uni-app中常用的标签和样式

2021-01-16  本文已影响0人  五四青年_4e7d

标签:<view> < button> <image>

<template>
<template>
    <view class="content">
        <view class="text-area">
            <text class="title" selectable>{{title}}</text> 
        </view>
        <view>
            <text class="title">不允许选中</text>
        </view>
        <view>
            <text class="title" space="ensp">中文     空格解析</text>
        </view>
        <view class="box" hover-class="box-active" hover-stop-propagation :hover-start-time="2000"  :hover-stay-time="2000">
            <text >手按下去的样式</text>
        </view>
        <view>
            <button size="mini">按钮</button>
            <button size="primary" plain>按钮</button>
            <button loading>按钮</button>
        </view>
        <image src="../../static/bar/1_odd.png" ></image>
        <image src="../../static/bar/1_odd.png"  mode="aspectFit"></image>
        <image src="../../static/bar/1_odd.png"  mode="aspectFill"></image>
    </view>
</template>
</template>

样式:

屏幕宽度750rpx:

.text-area {
        width:750rpx;
        height:750rpx;
        background:red;
    }

@样式文件引入

<style>
    @import url("./a.css");
</style>

字体图标库引入(App.vue中)

@import url("./static/font/iconfont.css");

iconfont.css注意路径问题:
@font-face {font-family: "iconfont";
  src: url('~@/static/font/iconfont.eot?t=1610804758671'); /* IE9 */
  src: url('~@/static/font/iconfont.eot?t=1610804758671#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('~@/static/font/iconfont.woff?t=1610804758671') format('woff'),
  url('~@/static/font/iconfont.ttf?t=1610804758671') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/font/iconfont.svg?t=1610804758671#iconfont') format('svg'); /* iOS 4.1- */
}
上一篇下一篇

猜你喜欢

热点阅读