sailun
/
sailun-shop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
    <meta name="referrer" content="always" />
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
    <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="../script/aui-tab.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vant-ui.js"></script>
    <script src="js/main.js"></script>
    <title></title>
</head>
<style>
    [v-cloak] {
        display: none;
    }

    .card {
        background-color: #fff;
        border-radius: .2rem;
        width: 7rem;
        margin: .25rem
    }

    .card-header {
        background-color: #B0B0B0;
        border-top-left-radius: .2rem;
        border-top-right-radius: .2rem;
        height: 1rem;
        font-size: .5rem;
        font-weight: 800;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-header2 {
        background-color: #0096DF;
        border-top-left-radius: .2rem;
        border-top-right-radius: .2rem;
        height: 1rem;
        font-size: .5rem;
        font-weight: 800;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-header3 {
        background-color: #FBC92E;
        border-top-left-radius: .2rem;
        border-top-right-radius: .2rem;
        height: 1rem;
        font-size: .5rem;
        font-weight: 800;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-footer {
        height: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .jt {
        border-right: 2px solid #AAAAAA;
        border-bottom: 2px solid #AAAAAA;
        width: .2rem;
        height: .2rem;
        transform: rotate(45deg);
        margin-bottom: .1rem;
    }

    .card-input {
        display: flex;
        align-items: center;
        border: 1px solid #ABABAB;
        border-radius: .1rem;
    }

    .input-left {
        height: .6rem;
        font-size: .25rem;
        width: 1.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .input-right {
        height: .6rem;
        width: .6rem;
        border-left: 1px solid #ABABAB;
        border-top-right-radius: .1rem;
        border-bottom-right-radius: .1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F2F2F2;
    }

    .card_td1 {
        display: flex;
        border-left: 1px solid #E9E9E9;
        border-right: 1px solid #E9E9E9;
        height: 1rem;
    }

    .card_td2 {
        display: flex;
        border: 1px solid #E9E9E9;
        border-bottom: 0;
        height: 1rem;
    }

    .card_td3 {
        display: flex;
        border: 1px solid #E9E9E9;
        border-bottom-left-radius: .2rem;
        border-bottom-right-radius: .2rem;
        height: 1rem;
    }

    .mescroll {
        position: relative;
        padding-bottom: 1.6rem;
    }
</style>

<body>
    <div id="app" style="background-color:#F5F5F5">
        <header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
            <div>
                <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span
                        class="aui-iconfont aui-icon-left"></span> </a>
                <div class="aui-title" id="aui-title">
                    改装轮胎计算器
                </div>
            </div>
        </header>
        <div id="mescroll" class="mescroll-touch-y mescroll">
            <div style="display:flex;justify-content:center;flex-direction: column;">
                <div class="card">
                    <div class="card-header">
                        原轮胎尺寸
                    </div>
                    <div class="card-footer">
                        <div class="card-input" @click="showPicker = true">
                            <div class="input-left">
                                <div>
                                    {{value}}
                                </div>
                            </div>
                            <div class="input-right">
                                <div class="jt">

                                </div>
                            </div>
                        </div>
                        <div style="color:#999999;font-weight:800;font-size:.4rem;margin:0 .05rem 0 .05rem">
                            /
                        </div>
                        <div class="card-input" @click="showPicker2 = true">
                            <div class="input-left">
                                <div>
                                    {{value2}}
                                </div>
                            </div>
                            <div class="input-right">
                                <div class="jt">

                                </div>
                            </div>
                        </div>
                        <div style="color:#999999;font-weight:800;font-size:.4rem;margin:0 .05rem 0 .05rem">
                            R
                        </div>
                        <div class="card-input" @click="showPicker3 = true">
                            <div class="input-left">
                                <div>
                                    {{value3}}
                                </div>
                            </div>
                            <div class="input-right">
                                <div class="jt">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header2">
                        新轮胎尺寸
                    </div>
                    <div class="card-footer">
                        <div class="card-input" @click="newshowPicker = true">
                            <div class="input-left">
                                <div>
                                    {{newValue}}
                                </div>
                            </div>
                            <div class="input-right">
                                <div class="jt">

                                </div>
                            </div>
                        </div>
                        <div style="color:#999999;font-weight:800;font-size:.4rem;margin:0 .05rem 0 .05rem">
                            /
                        </div>
                        <div class="card-input" @click="newshowPicker2 = true">
                            <div class="input-left">
                                <div>
                                    {{newValue2}}
                                </div>
                            </div>
                            <div class="input-right">
                                <div class="jt">

                                </div>
                            </div>
                        </div>
                        <div style="color:#999999;font-weight:800;font-size:.4rem;margin:0 .05rem 0 .05rem">
                            R
                        </div>
                        <div class="card-input" @click="newshowPicker3 = true">
                            <div class="input-left">
                                <div>
                                    {{newValue3}}
                                </div>
                            </div>
                            <div class="input-right">
                                <div class="jt">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header3">
                        <div style="width: 2.5rem;text-align: center;">——</div>
                        <div style="width: 2.25rem;text-align: center;">原轮胎</div>
                        <div style="width: 2.25rem;text-align: center;">新轮胎</div>
                    </div>
                    <div class="card_td1">
                        <div
                            style="width: 2.5rem;border-right: 1px solid #E9E9E9;display:flex;align-items:center;justify-content: center;">
                            <div>侧壁</div>
                        </div>
                        <div
                            style="width: 2.25rem;border-right: 1px solid #E9E9E9;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!sidewall">—</div>
                            <div v-else>{{sidewall| numFilter}}</div>
                        </div>
                        <div style="width: 2.25rem;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!newsidewall">—</div>
                            <div v-else>{{newsidewall| numFilter}}</div>
                        </div>
                    </div>
                    <div class="card_td2">
                        <div
                            style="width: 2.5rem;border-right: 1px solid #E9E9E9;display:flex;align-items:center;justify-content: center;">
                            <div>直径</div>
                        </div>
                        <div
                            style="width: 2.25rem;border-right: 1px solid #E9E9E9;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!diameter">—</div>
                            <div v-else>{{diameter | numFilter}}</div>
                        </div>
                        <div style="width: 2.25rem;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!newdiameter">—</div>
                            <div v-else>{{newdiameter | numFilter}}</div>
                        </div>
                    </div>
                    <div class="card_td2">
                        <div
                            style="width: 2.5rem;border-right: 1px solid #E9E9E9;display:flex;align-items:center;justify-content: center;">
                            <div>轮胎周长</div>
                        </div>
                        <div
                            style="width: 2.25rem;border-right: 1px solid #E9E9E9;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!perimeter">—</div>
                            <div v-else>{{perimeter| numFilter}}</div>
                        </div>
                        <div style="width: 2.25rem;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!newperimeter">—</div>
                            <div v-else>{{newperimeter| numFilter}}</div>
                        </div>
                    </div>
                    <div class="card_td2">
                        <div
                            style="width: 2.5rem;border-right: 1px solid #E9E9E9;display:flex;align-items:center;justify-content: center;">
                            <div>转数/公里</div>
                        </div>
                        <div
                            style="width: 2.25rem;border-right: 1px solid #E9E9E9;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!numTurn">—</div>
                            <div v-else>{{numTurn|numFilter}}</div>
                        </div>
                        <div style="width: 2.25rem;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!newnumTurn">—</div>
                            <div v-else>{{newnumTurn|numFilter}}</div>
                        </div>
                    </div>
                    <div class="card_td2">
                        <div
                            style="width: 4.75rem;border-right: 1px solid #E9E9E9;display:flex;align-items:center;justify-content: center;">
                            <div style="text-align: center;">实际车速100km/h时 车速表显示为</div>
                        </div>
                        <div style="width: 2.25rem;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!speed">—</div>
                            <div v-else>{{speed|numFilter}}km/h</div>
                        </div>
                    </div>
                    <div class="card_td3">
                        <div
                            style="width: 4.75rem;border-right: 1px solid #E9E9E9;display:flex;align-items:center;justify-content: center;">
                            <div>轮胎厚度</div>
                        </div>
                        <div style="width: 2.25rem;display: flex;align-items:center;justify-content: center;">
                            <div v-if="!thickness&&thickness!=0">—</div>
                            <div v-else>{{thickness|numFilter}}mm</div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div style="display: flex;flex-direction: column;align-items: center;margin: .5rem;">
                        <div v-if="!recommend&&recommend!=0" style="color: #908F94;">选完参数在这里查看结果哦！</div>      
                        <div v-else>
                            <div v-if="recommend>=-0.03&&recommend<0.03">
                                <div style="color: #908F94;">此改装方案无安全隐患</div>
                                <div style="color: #59BDF9;font-size: 1rem;font-weight: 800;text-align: center;" >推荐</div>
                            </div>
                           <div v-else> 
                             <div style="color: #908F94;">此改装方案存在安全隐患</div>
                             <div style="color: red;font-size: 1rem;font-weight: 800;text-align: center;" >不推荐</div>
                           </div>
                        </div>                                     
                        
                    </div>

                </div>
                <van-popup v-model="showPicker" round position="bottom">
                    <van-picker show-toolbar :columns="columns" value-key="name" @cancel="showPicker = false"
                        @confirm="onConfirm" />
                </van-popup>
                <van-popup v-model="showPicker2" round position="bottom">
                    <van-picker show-toolbar :columns="columns2" value-key="name2" @cancel="showPicker2 = false"
                        @confirm="onConfirm2" />
                </van-popup>
                <van-popup v-model="showPicker3" round position="bottom">
                    <van-picker show-toolbar :columns="columns3" value-key="name3" @cancel="showPicker3 = false"
                        @confirm="onConfirm3" />
                </van-popup>
                <van-popup v-model="newshowPicker" round position="bottom">
                    <van-picker show-toolbar :columns="newcolumns" value-key="newName" @cancel="newshowPicker = false"
                        @confirm="newonConfirm" />
                </van-popup>
                <van-popup v-model="newshowPicker2" round position="bottom">
                    <van-picker show-toolbar :columns="newcolumns2" value-key="newName2"
                        @cancel="newshowPicker2 = false" @confirm="newonConfirm2" />
                </van-popup>
                <van-popup v-model="newshowPicker3" round position="bottom">
                    <van-picker show-toolbar :columns="newcolumns3" value-key="newName3"
                        @cancel="newshowPicker3 = false" @confirm="newonConfirm3" />
                </van-popup>
            </div>
        </div>
    </div>


</body>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
    function closeWin() {
        api.closeWin({});
    }
    apiready = function () {
        api.parseTapmode();
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        new Vue({
            el: '#app',
            data: {
                value: "胎宽",
                showPicker: false,
                columns: [
                    { value: 145, name: "胎宽：145" },
                    { value: 155, name: "胎宽：155" },
                    { value: 165, name: "胎宽：165" },
                    { value: 175, name: "胎宽：175" },
                    { value: 185, name: "胎宽：185" },
                    { value: 195, name: "胎宽：195" },
                    { value: 205, name: "胎宽：205" },
                    { value: 215, name: "胎宽：215" },
                    { value: 225, name: "胎宽：225" },
                    { value: 235, name: "胎宽：235" },
                    { value: 245, name: "胎宽：245" },
                    { value: 255, name: "胎宽：255" },
                    { value: 265, name: "胎宽：265" },
                    { value: 275, name: "胎宽：275" },
                    { value: 285, name: "胎宽：285" },
                    { value: 295, name: "胎宽：295" },
                    { value: 305, name: "胎宽：305" },
                    { value: 315, name: "胎宽：315" },
                    { value: 325, name: "胎宽：325" },
                    { value: 335, name: "胎宽：335" },
                ],
                value2: "扁平比",
                showPicker2: false,
                columns2: [
                    { value2: 30, name2: "扁平比：30" },
                    { value2: 35, name2: "扁平比：35" },
                    { value2: 40, name2: "扁平比：40" },
                    { value2: 45, name2: "扁平比：45" },
                    { value2: 50, name2: "扁平比：50" },
                    { value2: 55, name2: "扁平比：55" },
                    { value2: 60, name2: "扁平比：60" },
                    { value2: 65, name2: "扁平比：65" },
                    { value2: 70, name2: "扁平比：70" },
                    { value2: 75, name2: "扁平比：75" },
                    { value2: 80, name2: "扁平比：80" },
                ],
                value3: "轮毂直径",
                showPicker3: false,
                columns3: [
                    { value3: 12, name3: "轮毂直径：12" },
                    { value3: 13, name3: "轮毂直径：13" },
                    { value3: 14, name3: "轮毂直径：14" },
                    { value3: 15, name3: "轮毂直径：15" },
                    { value3: 16, name3: "轮毂直径：16" },
                    { value3: 17, name3: "轮毂直径：17" },
                    { value3: 18, name3: "轮毂直径：18" },
                    { value3: 19, name3: "轮毂直径：19" },
                    { value3: 20, name3: "轮毂直径：20" },
                    { value3: 21, name3: "轮毂直径：21" },
                    { value3: 22, name3: "轮毂直径：22" },
                    { value3: 23, name3: "轮毂直径：23" },
                ],
                newValue: "胎宽",
                newshowPicker: false,
                newcolumns: [
                    { newValue: 145, newName: "胎宽：145" },
                    { newValue: 155, newName: "胎宽：155" },
                    { newValue: 165, newName: "胎宽：165" },
                    { newValue: 175, newName: "胎宽：175" },
                    { newValue: 185, newName: "胎宽：185" },
                    { newValue: 195, newName: "胎宽：195" },
                    { newValue: 205, newName: "胎宽：205" },
                    { newValue: 215, newName: "胎宽：215" },
                    { newValue: 225, newName: "胎宽：225" },
                    { newValue: 235, newName: "胎宽：235" },
                    { newValue: 245, newName: "胎宽：245" },
                    { newValue: 255, newName: "胎宽：255" },
                    { newValue: 265, newName: "胎宽：265" },
                    { newValue: 275, newName: "胎宽：275" },
                    { newValue: 285, newName: "胎宽：285" },
                    { newValue: 295, newName: "胎宽：295" },
                    { newValue: 305, newName: "胎宽：305" },
                    { newValue: 315, newName: "胎宽：315" },
                    { newValue: 325, newName: "胎宽：325" },
                    { newValue: 335, newName: "胎宽：335" },
                ],
                newValue2: "扁平比",
                newshowPicker2: false,
                newcolumns2: [
                    { newValue2: 30, newName2: "扁平比：30" },
                    { newValue2: 35, newName2: "扁平比：35" },
                    { newValue2: 40, newName2: "扁平比：40" },
                    { newValue2: 45, newName2: "扁平比：45" },
                    { newValue2: 50, newName2: "扁平比：50" },
                    { newValue2: 55, newName2: "扁平比：55" },
                    { newValue2: 60, newName2: "扁平比：60" },
                    { newValue2: 65, newName2: "扁平比：65" },
                    { newValue2: 70, newName2: "扁平比：70" },
                    { newValue2: 75, newName2: "扁平比：75" },
                    { newValue2: 80, newName2: "扁平比：80" },
                ],
                newValue3: "轮毂直径",
                newshowPicker3: false,
                newcolumns3: [
                    { newValue3: 12, newName3: "轮毂直径：12" },
                    { newValue3: 13, newName3: "轮毂直径：13" },
                    { newValue3: 14, newName3: "轮毂直径：14" },
                    { newValue3: 15, newName3: "轮毂直径：15" },
                    { newValue3: 16, newName3: "轮毂直径：16" },
                    { newValue3: 17, newName3: "轮毂直径：17" },
                    { newValue3: 18, newName3: "轮毂直径：18" },
                    { newValue3: 19, newName3: "轮毂直径：19" },
                    { newValue3: 20, newName3: "轮毂直径：20" },
                    { newValue3: 21, newName3: "轮毂直径：21" },
                    { newValue3: 22, newName3: "轮毂直径：22" },
                    { newValue3: 23, newName3: "轮毂直径：23" },
                ],
            },
            filters: {
                numFilter: function (val) {
                    return parseFloat(val).toFixed(2);
                },
            },
            methods: {
                init: function () {

                },
                onConfirm(value) {
                    this.value = value.value;
                    this.showPicker = false;
                },
                onConfirm2(value2) {
                    this.value2 = value2.value2;
                    this.showPicker2 = false;
                },
                onConfirm3(value3) {
                    this.value3 = value3.value3;
                    this.showPicker3 = false;
                },
                newonConfirm(newValue) {
                    this.newValue = newValue.newValue;
                    this.newshowPicker = false;
                },
                newonConfirm2(newValue2) {
                    this.newValue2 = newValue2.newValue2;
                    this.newshowPicker2 = false;
                },
                newonConfirm3(newValue3) {
                    this.newValue3 = newValue3.newValue3;
                    this.newshowPicker3 = false;
                },
            },
            computed: {
                sidewall: function () {
                    var sidewall = 0;
                    sidewall = (this.value * this.value2) / 100;
                    return sidewall
                },
                diameter: function () {
                    var diameter = 0;
                    diameter = this.sidewall * 2 + this.value3 * 25.4;
                    return diameter;
                },
                perimeter: function () {
                    var perimeter = 0;
                    perimeter = this.diameter * 3.14;
                    return perimeter;
                },
                numTurn:function(){
                    var numTurn = 0;
                    numTurn = 1000/(this.perimeter/1000);
                    return numTurn;
                },
                newsidewall: function () {
                    var newsidewall = 0;
                    newsidewall = (this.newValue * this.newValue2) / 100;
                    return newsidewall
                },
                newdiameter: function () {
                    var newdiameter = 0;
                    newdiameter = this.newsidewall * 2 + this.newValue3 * 25.4;
                    return newdiameter;
                },
                newperimeter: function () {
                    var newperimeter = 0;
                    newperimeter = this.newdiameter * 3.14;
                    return newperimeter;
                },
                newnumTurn:function(){
                    var newnumTurn = 0;
                    newnumTurn = 1000/(this.newperimeter/1000);
                    return newnumTurn;
                },
                speed:function(){
                    var Speed=0;
                    speed=(1-(this.newdiameter-this.diameter)/this.diameter)*100;
                    return speed;
                },
                thickness:function(){
                    var thickness=0;
                    thickness=(this.newdiameter-this.diameter)/2
                    return thickness;
                },
                recommend:function(){
                    var recommend=0;
                    recommend=(this.newdiameter-this.diameter)/this.diameter
                    return recommend;
                }
            },
            mounted: function () {
                this.init();
            },
        })
    }
</script>

</html>