<template>
	<view class="box2" hover-class="box2-active">
		<view 
			class="box" 
			hover-class="box-active" 
			hover-stop-propagation
			:hover-start-time="2000"
			:hover-stay-time="2000"
		>我是一个大盒子</view>
	</view>
</template>

<script>
</script>

<style>
	.box{
		width: 100px;
		height: 100px;
		background: #4CD964;
	},
	.box-active{
		width: 100px;
		height: 100px;
		background: #007AFF;
	},
	.box2{
		width: 300px;
		height: 300px;
		background: #d9a319;
	},
	.box2-active{
		width: 300px;
		height: 300px;
		background: #ff0a22;
	}
</style>

<template>
    <scroll-view class="container1" scroll-y>
      <view>1</view>
      <view>2</view>
      <view>3</view>
    </scroll-view>
</template>

<style>
.container1 {
  border: 1px solid red;
  /* 给scroll-view设置固定高度 */
  height: 120px;
  width: 100px
}
.container1 view {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.container1 view:nth-child(1) {
  background-color: #12aa9c;
}
.container1 view:nth-child(2) {
  background-color: #2775b6;
}
.container1 view:nth-child(3) {
  background-color: #ee3f4d;
}
</style>

<template>
    <!-- 轮播图区域 -->
    <!-- indicator-dots 显示面板指示点 -->
    <swiper class="swiper-container" indicator-dots>
      <!-- 第一项 -->
      <swiper-item>
        <view class="item">A</view>
      </swiper-item>
      <!-- 第二项 -->
      <swiper-item>
        <view class="item">B</view>
      </swiper-item>
      <!-- 第三项 -->
      <swiper-item>
        <view class="item">C</view>
      </swiper-item>
    </swiper>
</template>

<style>
.swiper-container {
  /* 轮播图容器的高度 */
  height: 150px;
}
.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item {
  background-color: lightblue;
}
swiper-item:nth-child(3) .item {
  background-color: lightcoral;
}
</style>

<template>
    <view class="item" v-for="(value,index) in iconType" :key="index">
        <icon :type="value" size="26"/>
        <text>{{value}}</text>
    </view>
</template>

<script>
export default {
data() {
    return {
        iconType: ['success']
    }
},
onLoad() {
    // #ifdef APP-PLUS|| MP-WEIXIN
    this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
    // #endif
    // #ifdef MP-ALIPAY
    this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
    // #endif
    // #ifdef MP-BAIDU
    this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
    // #endif
}
}
</script>