salmanyaqoob

.stack {
    width: 454px;
    height: 454px;
    justify-content: center;
    background-color: whitesmoke;
}
.container {
    background-color: whitesmoke;
}
.compass-container {

salmanyaqoob

import utils from '../../common/utils.js';

export default {
    backAction() {
        utils.backToHome();
    },
}

salmanyaqoob

<stack class="stack">
    <image src='/common/background.png' class="background"></image>
    <div class="container">
        <div id="effect1" class="changeColor"></div>
        <div class="space"></div>
        <div id="effect2" class="circleAnimation"></div>
        <input class="backBtn" type="button" value="Back" onclick="backAction"></input>
    </div>
</stack>

salmanyaqoob

@import '../../common/style.css';

.image-player {
    width: 256px;
    height: 256px;
}

salmanyaqoob

import utils from '../../common/utils.js';

export default {
    data: {
        images: [
            { src: '/common/pic1.png' },
            { src: '/common/pic2.png' },
            { src: '/common/pic3.png' },
            { src: '/common/pic4.png' },
            { src: '/common/pic5.png' },

salmanyaqoob

<stack class="stack">
    <image src='/common/background.png' class="background"></image>
    <div class="container">
        <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s"
                onclick="handleClick"></image-animator>
        <input class="backBtn" type="button" value="Back" onclick="backAction"></input>
    </div>
</stack>

salmanyaqoob

@import '../../common/style.css';


.containerArray {
    flex-direction: column;
    width: 300px;
    height: 50px;
    background-color: transparent;
}

salmanyaqoob

import app from '@system.app'
import utils from '../../common/utils.js';


export default {
    data: {
        arrayData: [
            {id: 1, name: 'jack', age: 18},
            {id: 2, name: 'tony', age: 18},
        ],

salmanyaqoob

<stack class="stack">
    <image src='/common/background.png' class="background"></image>
    <div class="container" onswipe="touchMove">
        <text>
            Arrays
        </text>
        <!-- div loop rendering -->
        <!--By default, $item indicates the element in the array, and $idx indicates the index of the element in the array.-->
        <div for="{{arrayData}}" tid="id" class="containerArray">
            <text>{{$idx}}.{{$item.name}}

salmanyaqoob

@import '../../common/style.css';


.showList {
    background-color: transparent;
    flex-direction: column;
    width: 454px;
    height: 400px;
}
.showListItem {